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图 灵 社 区 的 电子 书 没有 采用 专 有 客户 
端 ， 您 可 以 在 任意 设备 上 ， 用 自己 喜 
欢 的 浏览 器 和 PDF 阅读 器 进行 阅读 。 
但 您 购买 的 电子 书 仅 供 您 个 人 使 用 ， 
未 经 授权 ， 不 得 进行 传播 。 

我 们 愿意 相信 读者 具有 这 样 的 民 知 和 
觉悟 ， 与 我 们 共同 保护 知识 产权 。 
如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 对 
该 用 户 实施 包括 但 不 限于 关闭 该 帐号 
等 维权 措施 ， 并 可 能 追究 法 律 责任 。 





刘涛 

网 络 常用 名 “武官 尚书 ”， 前 端 开发 工 
程 师 ， 目 前 就 职 于 奇 虎 360 搜 索 团 队 ， 
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术 的 发 展 变迁 ， 热 衷 于 新 技术 的 学 习 研 
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内 容 提 要 


本 书 介绍 SVG 绘画 ， 包 括 基础 知识 和 如 何 通过 混合 和 搭配 工具 来 生成 复杂 
的 效果 。 主 要 内 容 有 :把 SVG 代码 转换 为 可 视图 形 的 泻 染 模型 ， 如 何 使 用 颜色 ， 
透明 度 的 控制 方法 以 及 它 对 图 片 的 影响 ， 泻 染 服 务 和 渐变 。 

本 书 适合 所 有 想 利 用 SVG 提高 Web 体验 的 读者 。 
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开创 着 未 来 ， 而 我 们 关注 真正 重要 的 技术 趋势 一 一 通过 放大 那些 “细微 的 信号 ”来 
| 激 社会 对 新 科技 的 应 用 。 作 为 技术 社区 中 活跃 的 参与 者 ，O’Reilly 的 发 展 充满 了 
二 创新 的 倡导 、 创 造 和 发 扬 光 大 。 


"Reilly 为 软件 开发 人 员 带 来 革命 性 的 “动物 书 ”; 创建 第 一 个 商业 网 站 (GNN) ; 
组 织 了 影响 深远 的 开放 源 代 码 峰 会 ， 以 至 于 开源 软件 运动 以 此 命名 ;创立 了 Make 





























杂志 ， 从 而 成 为 DIY 革命 的 主要 先锋 ， 公 司 一 如 既往 地 通过 多 种 形式 缔结 信息 与 


人 的 纽带 。O’Reilly 的 会 议和 峰会 聚集 了 众多 超级 极 客 和 高 瞻 远 瞩 的 商业 领袖 ， 共 
同 描绘 出 开创 新 产业 的 革命 性 思想 。 作 为 技术 人 士 获取 信息 的 选择 ，O'Reilly 现在 






































还 将 先锋 专家 的 知识 传递 给 普通 的 计算 机 用 户 。 无 论 是 通过 书籍 出 版 、 在 线 服务 或 























者 面授 课程 ， 每 一 项 OReilly 的 产品 都 反映 了 公司 不 可 动摇 的 理念 信息 是 激发 
创新 的 力量 。 
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“O'Reilly 凭借 一 系列 (真希 望 当 初 我 也 想到 了 ) 非凡 想法 建立 了 数 百 万 美元 的 
业务 。” 





Business 2.0 


“O'Reilly Conference 是 聚集 关键 思想 领袖 的 绝对 典范 。” 
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本 书 深 入 讨论 了 SVG 的 一 个 特定 的 方面 : 绘画 。 这 里 的 绘画 使 用 的 不 是 油 
墨 或 水 彩 ， 而 是 可 被 计算 机 转化 为 有 色 像 素 的 图 形 指令 。 本 书 探讨 了 创建 
它 的 可 能 性 以 及 阐 在 的 风险 。 书 中 不 仅 描 述 了 一 些 基 础 知识 ， 还 介绍 了 如 
何 通过 混合 和 搭配 工具 来 生成 复杂 的 效果 。 


本 书 起 源 于 一 个 介绍 如 何在 Web 上 使 用 SVG 的 项 目 。 为 了 保证 本 书 篇 幅 
适中 ， 并 适合 入 门 读者 ， 许 多 细节 和 复杂 的 部 分 我 们 不 再 费 述 。 但 这 些 细 
节 和 复杂 内 容 会 使 作为 图 片 格式 的 SVG 更 加 丰富 、 美 妙 。 擎 握 了 SVG 基 
础 后 ， 你 就 可 以 考虑 去 制作 更 加 复杂 的 绘画 和 更 加 细致 的 效果 。 


本 书 内 容 


如 果 你 正在 阅读 本 书 ， 我 们 希望 你 已 经 熟悉 了 SVG 的 基础 知识 ， 例 如 如 
何 把 图 形 定义 为 一 系列 形状 ， 如 何 将 图 形 作为 一 个 单独 的 图 片 文件 或 作为 
HTML 页 面 中 的 标记 来 使 用 。 如 果 你 不 确定 是 否 已 经 准备 好 ， 第 1 章 会 带 
你 回顾 一 些 应 该 知道 的 基础 概念 。 


本 书 的 剩余 部 分 着 重 讲解 SVG 颜色 、 图 案 以 及 渐变 。 


。 第 2 章 讨论 了 把 SVG 代码 转换 为 可 视图 形 的 渲染 模型 ， 还 介绍 了 可 以 设 
置 在 形状 和 文本 上 以 控制 它们 如 何 绘制 在 屏幕 上 的 基础 属性 。 

。 第 3 章 着 重 讲解 了 颜色 : 它 在 自然 界 中 是 如 何 工作 的 ， 在 计算 机 中 又 是 
如 何 工 作 的 ， 以 及 如 何在 SVG 代码 中 指定 颜色 。 

。 第 4 章 中 讨论 了 透明 度 ， 更 确切 地 说 ， 是 不 透明 度 ， 还 介绍 了 控制 图 形 
不 透明 度 的 多 种 方法 ， 以 及 它们 是 如 何 影响 最 终 效果 的 。 
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第 5 MPSA TMA MS: 定义 其 他 SVG 图 形 和 文本 如 何 被 绘制 
到 屏幕 上 的 复杂 图 形 内 容 。 这 一 章 还 介绍 了 纯色 泻 染 服务 ， 你 最 初 可 能 
会 觉得 它 用 处 不 大 ， 但 实际 上 却 很 有 用 。 

第 6 章 着 眼 于 渐变 ， 主 要 讲解 了 通过 调整 结 点 的 位 置 和 属性 来 创建 不 同 
的 颜色 过 渡 效 果 。 
第 7 章 探讨 了 如 何 控制 线性 新 变 在 要 浑 染 的 形状 内 移动 。 
第 8 章 介 绍 了 重复 线性 渐变 以 及 利用 它们 可 以 实现 的 一 些 效果 ， 同 时 还 
介绍 了 一 些 在 HTML 页 面 中 使 用 渐变 (以 及 其 他 演 染 服务 ) 生成 内 联 
SVG 图 标的 示例 和 小 技巧 。 

第 9 章 着 眼 于 径 向 渐变 ， 包 括 重复 径 向 渐变 ， 最 后 还 给 出 了 一 些 使 用 多 
个 渐变 来 创建 复杂 效果 的 例子 。 

第 10 ENAT <pattern>， 它 用 于 创建 重复 的 磁 贴 和 纹理 。 

第 11 章 展示 了 如 何 使 用 图 案 来 定义 用 于 填充 形状 或 文本 的 单个 图 像 或 
图 形 。 
第 12 章 详细 介绍 了 泻 染 服务 是 如 何 应 用 到 文本 上 的 。 

第 13 章 讨 论 了 使 用 泻 染 服 务 绘制 描 边 区 域 而 非 填 充 区 域 时 出 现 的 一 些 
问题 。 
第 14 章 给 出 了 一 些 给 泻 染 服务 添加 动画 的 例子 ， 还 讨论 了 在 SVG 中 可 
用 的 不 同 添加 动画 方法 的 优点 与 局 限 。 















































本 书 最 后 的 两 个 附录 提供 了 把 理论 用 到 实践 中 时 会 用 到 的 基本 语法 ， 可 供 
你 快速 参考 。 


附录 A 重 述 了 定义 颜色 的 多 种 方法 ， 包 括 所 有 预定 义 的 颜色 关键 词 。 
附录 B 总 结 了 所 有 的 渲染 服务 元 素 、 它 们 的 属性 ,以 及 相关 的 样式 属性 。 





无 论 你 是 随便 翻阅 本 书 ， 还 是 从 头 到 尾 仔细 阅读 ， 理 解 如 下 用 于 提供 额外 
信息 的 小 指南 ， 你 可 以 获得 更 多 知识 。 
关于 示例 


SVG 图 像 可 以 使 用 许多 不 同类 型 的 软件 来 展示 和 操作 ， 且 每 个 程序 在 SVG 
代码 的 解析 上 略 有 不 同 。 尤 其 在 图 形 文件 分 发 在 Web 上 时 ， 这 确实 是 个 问 

















题 ， 你 希望 人 们 在 另 一 端 看 到 的 内 容 与 你 期 望 的 效果 无 限 接 近 。 
x | 前 言 


因此 本 书 中 的 例子 在 桌面 最 新 稳定 版 (2015 年 7 H) 的 Chrome, Firefox, 
Internet Explorer 以 及 Safari 浏览 器 中 都 进行 了 测试 。 缺 陷 、 漏 洞 以 及 浏览 
器 的 支持 程度 都 在 文本 中 有 所 注 明 。 此 外 ， 还 提 到 了 微软 Edge 浏览 器 预期 
在 支持 程度 上 的 更 改 。 


几乎 所 有 其 他 训 览 器 使 用 的 都 是 某 一 主要 开源 这 染 库 的 变 体 : Gecko 
(Firefox), WebKit (Safari 以 及 iOS 设备 ) 或 Chromium/Blink (WebKit a 
一 个 分 支 ， 主 要 为 Chrome FAR). Ak, PRT LALA SE 0 ba as Sc FY. 
作为 指南 ， 但 要 注意 的 是 并 非 所 有 软件 都 会 同时 更 新 。 ional 
即使 某 些 功能 在 技术 上 是 支持 的 ， 但 会 受到 实际 性 能 的 限制 。 某 些 移动 浏 
览 器 (例如 Opera Mini) 会 刻意 限制 它们 支持 的 功能 来 提升 性 能 


SVG 还 可 以 用 在 Adobe Illustrator 和 Inkscape 等 图 形 程 序 中 。 有 很 多 工具 ， 
例如 Apache Batik 或 libRSVG， 可 以 把 SVG 代码 转换 为 其 他 矢量 图 形 格 
式 ， 比 如 PDF 文档 。 这 些 工具 都 会 有 新 的 兼容 性 问题 ， 这 在 本 书 中 没有 详 
细 介 绍 。 一 定 要 小 心地 在 所 有 需要 使 用 的 工具 中 测试 ! 


使 用 代码 示例 
补充 材料 (代码 示例 和 图 形 ) 可 以 从 以 下 网 址 在 线 获取 。 
下 载 地 址 : https://github.com/oreillymedia/S VG_Colors_Patterns_Gradients, 










































































在 线 观看 地 址 : http://oreillymedia.github.io/SVG_Colors_Patterns_Gradients/。 


本 书 是 要 帮 你 完成 工作 的 。 一 般 情 况 下 ， 如 果 书 中 提供 了 示例 代码 ， 你 上 
以 在 你 的 程序 或 文档 中 使 用 ， 且 不 用 联系 我 们 获得 许可 ， 除 非 你 大 量 复制 
我 们 的 代码 。 例 如 ， 在 你 的 程序 中 使 用 本 书 中 的 几 个 代码 块 不 需要 获得 我 
们 的 许可 。 销 售 或 分 发 O'Reilly 图 书 中 示例 的 CD-ROM 需要 获得 许可 。3 引 
用 本 书 及 引用 示例 代码 来 回答 问题 不 需要 获得 我 们 的 许可 。 将 本 书 中 大 量 
示例 代码 合并 到 你 的 产品 文档 中 时 需要 获得 许可 。 

我 们 很 希望 但 并 不 强制 要 求 你 在 引用 本 书 内 容 时 加 上 引用 说 明 。 引 用 说 
明 一 般 包 括 书 名 、 作 者 、 出 版 社 和 ISBN。 上 比如 : “SVG Colors, Patterns & 
Gradients by Amelia Bellamy-Royds and Kurt Cagle (O’Reilly). Copyright 2016 
Amelia Bellamy-Royds and Kurt Cagle, 978-1-4919-3374-9.” 


如 果 你 觉得 对 代码 示例 的 使 用 不 属于 合理 使 用 或 超出 了 上 述 许可 范围 ， 请 
随时 通过 permissions@oreilly.com 联系 我 们 。 
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排版 约定 
本 书 使 用 的 排版 约定 如 下 。 
。 楷体 
表示 新 术语 。 
等 宽 字 体 (constant width ) 
表示 程序 片段 ， 以 及 正文 中 出 现 的 变量 、 函 数 名 、 数 据 库 、 数 据 类 型 、 
环境 变量 、 语 名 和 关键 字 等 。 
加 粗 等 宽 字 体 (constant width bold ) 
表示 应 该 由 用 户 输入 的 命令 或 其 他 文本 。 
= AK (Constant width italic) 
表示 应 该 由 用 户 输入 的 值 或 根据 上 下 文 确 定 的 值 替 换 的 文本 。 











该 图 标 用 于 突出 SVG 中 特别 复杂 的 部 分 ， 或 初 看 不 太 明 
显 的 简单 的 快捷 方式 。 




















该 图 标 表示 一 般 的 广 记 和 有 趣 的 背景 信息 


这 样 的 警告 信息 将 用 于 突出 不 同 浏览 器 (或 其 他 软件 ) 
之 间 ， 或 SVG 作为 XML 文件 和 在 HTML 页 面 中 使 用 
SVG 之 间 的 兼容 性 问题 。 





除 此 之 外 ， 如 下 样式 将 用 于 补充 信息 。 


简介 
本 书 中 使 用 了 两 种 类 型 的 附注 栏 。“ 聚 焦 未 来 ”将 讨论 尚未 标准 化 的 拟定 功 
能 ， 或 还 没有 广泛 实施 的 新 标准 。 “CSS 与 SVG” 将 SVG 图 形 效果 和 创建 
相似 效果 的 CSS 样式 (如 果 有 的 话 ) 进行 比较 。 

















虽然 附注 栏 对 于 理解 SVG 颜色 、 图 案 和 渐变 并 不 是 必要 的 ， 但 在 规划 一 
完整 的 Web 项 目 时 它们 可 能 会 添加 重要 的 上 下 文 。 





Safari? Books Online 


e Safari Books Online (http:/Avww.safaribooksonline. 

4 Satay) om 是 应 运 而 生 的 数字 图 书馆 。 它 同时 以 图 书 

和 视频 的 形式 出 版 世界 顶级 技术 和 商务 作家 的 专 

业 作品 。 技 术 专 家 、 软 件 开 发 人 员 、Web 设计 师 、 商 务 人 士 和 创意 专家 等 ， 

在 开展 调研 、 解 决 问 题 、 学 习 和 认证 培训 时 ， 都 将 Safari Books Online 视 作 
获取 资料 的 首选 渠道 。 

对 于 组 织 团体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 组 合 和 

灵活 的 定价 策略 。 用 户 可 通过 一 个 功能 完备 的 数据 库 检索 系统 访问 O'Reilly 


Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft 


























Press. Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & 
Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, 
FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, 
Course Technology 以 及 其 他 几 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视 频 和 正式 
出 版 之 前 的 书稿 。 要 了 解 Safari Books Online 的 更 多 信息 ， 我 们 网 上 见 。 


联系 我 们 
请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 
美国 : 

O’Reilly Media, Inc. 


1005 Gravenstein Highway North 
Sebastopol, CA 95472 


中 国 : 
北京 市 西城 区 西直门 南大 街 2 号 成 铭 大 厦 C 座 807 (100035) 
LARA Si (AE) 有 限 公司 


O'Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 
括 勘 误 表 、 示 例 代码 以 及 其 他 信息 。 本 书 的 网 站 地 址 是 : 


http://bit.ly/svg-colors-patterns-and-gradients 

































































对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电 子 邮件 到 : 
bookquestions@oreilly.com 

要 了 解 更 多 O'Reilly 图 书 、 培 训 课程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 

网 站 : http://www.oreilly.com 

我 们 在 Facebook 的 地 址 如 下 : http://facebook.com/oreilly 

请 关注 我 们 的 Twitter 动态 : http://twitter.com/oreillymedia 

我 们 的 YouTube 视频 地 址 如 下 : http:Wwww.youtube.comyoreillymedia 
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电子 书 


扫描 如 下 二 维 码 ， 即 可 购买 本 书 电 子 书 。 















































第 1 章 


你 应 该 知道 的 事 





本 书 假设 你 已 经 了 解 过 SVG、 网 页 设计 ， 甚 至 有 JavaScript 编程 基础 。 


每 一 种 语言 都 有 自己 的 一 些 缺陷 ， 而 这 些 缺 陷 对 有 些 开发 者 来 说 很 明确 ， 
但 对 其 他 同样 优秀 的 开发 者 来 说 却 闻 所 未 闻 。 所 以 本 章 将 带 你 一 起 快速 回 
顾 一 些 你 必须 知道 的 东西 。 


1.1 SVG 通过 代码 来 画图 


SVG 就 是 一 个 图 片 文件 。 我 们 可 以 像 使 用 PNG 或 JPEG 等 图 片 文件 一 样 使 
用 它 ， 可 以 在 可 视 化 编辑 器 中 创建 和 编辑 SVG, tay DRE Ey A 
到 网 页 中 。 


但 是 SVG 并 不 仅仅 是 图 片 ， 它 是 包含 标记 元 素 、 文 本 、 样 式 指令 的 结构 化 
文档 。 其 他 图 片 格式 是 告诉 计算 机 在 屏幕 上 哪 一 点 应 该 绘制 什么 颜色 ， 而 
SVG 是 告诉 计算 机 如 何 通过 它 的 组 成 部 分 重组 图 形 。 这 产生 以 下 两 个 主要 
结果 。 


。 SVG 最 终 在 屏幕 上 的 显示 依赖 于 软件 对 SVG 规范 的 支持 程度 。 跨 浏览 
器 的 兼容 性 往往 是 一 个 问题 。 

。 对 SVG 的 一 部 分 单独 进行 增加 、 删 除 、 修 改 的 操作 是 非常 容易 的 ， 不 用 
担心 会 改变 SVG 的 其 他 部 分 。 我 们 可 以 在 编辑 器 中 进行 此 类 操作 ， 也 可 
以 动态 地 在 网 页 中 制作 动画 或 交互 图 形 。 















































1.2 SVG 始终 是 开源 的 


SVG 不 仅仅 是 一 组 计算 机 编码 指令 ， 它 还 是 人 类 可 读 的 文本 文件 。 你 不 仅 
可 以 在 文本 编辑 器 中 编辑 SVG， 甚至 还 可 以 在 有 语法 高 亮 和 自动 补 全 功能 
的 代码 编辑 器 中 编辑 它 。 


本 书 的 所 有 例子 都 专注 于 基本 的 SVG 代码 。 当 然 你 也 可 以 通过 可 视 化 编辑 
器 来 画 形状 、 选 颜色 、 调 整 图 形 展现 的 其 他 部 分 。 但 是 为 了 完全 可 控 ， 你 
需要 看 一 看 编辑 器 实际 创建 的 代码 。 


1.3 SVG 是 XML (有 时 也 是 HTML) 


文本 编辑 器 中 的 SVG 代码 看 起 来 非常 像 HTML 代码 (全 是 尖 括 号 和 属性 )， 
但 是 单独 的 SVG 文件 通常 被 解析 为 XML。 这 意味 着 你 的 SVG 通常 都 可 以 
被 XML 工具 解析 和 操控 ， 也 意味 着 如 果 你 忘记 引入 XML 的 命名 空间 或 者 
混淆 了 XML 语法 的 重要 细节 ， 你 的 网 页 将 什么 都 不 显示 。 


然而 ， 当 你 直接 在 HTMLS 标记 中 插入 SVG 时 ， 它 将 由 HTML 解析 器 处 
BE. HTML 解析 器 会 忽略 一 些 错误 《比如 缺少 结束 标签 或 使 用 不 带 引 号 的 
属性 ) ， 而 在 XML 解析 器 〈 或 大 多 数 仅 支持 SVG 的 图 形 编辑 器 ) 中 这 将 导 
致 解析 失败 。 它 也 会 忽略 自 定义 的 命名 空间 ， 将 不 能 识别 的 属性 或 标签 名 
变 成 小 写 ， 其 至 引起 其 他 不 能 预期 的 变化 。 


1.4 SVG 是 可 压缩 的 


SVG 的 大 部 分 语法 的 设计 都 是 为 了 使 其 易于 阅读 和 理解 ， 而 不 是 为 了 结构 
紧凑 ， 这 使 得 某 些 SVG 文件 看 起 来 相当 元 长 和 宛 余 。 但 是 ， 这 也 使 得 SVG 
非常 适合 通过 gzip 压缩 ， 而 网 页 中 的 SVG 都 应 该 被 压缩 。 通 常 ， 这 将 使 文 
件 大 小 减少 一 半 甚 至 更 多 。 在 普通 的 文件 服务 器 上 存储 压缩 过 的 SVG hH, 
通常 使 用 .svgz 作为 扩展 名 。 


SVG 也 是 容易 腔 肿 的 ， 这 也 在 另 一 方面 使 它 可 压缩 。 大 多 数 SVG 编辑 器 通 
过 给 定 唯 一 的 XML 命名 空间 ， 在 SVG 文件 中 添加 自己 的 元 素 和 属性 。 有 
些 优化 工具 开发 了 在 不 影响 最 终结 果 的 基础 上 把 代码 剥离 出 来 的 功能 。 在 
使 用 这 些 工具 时 ， 如 果 你 自己 操作 了 代码 ， 配 置 的 时 候 就 要 特别 小 心 ， 优 
化 工具 有 可 能 会 删除 掉 你 以 后 想 要 使 用 的 属性 。 


































































































15 图片 是 形状 的 集合 


那么 这 所 有 的 代码 想 要 表现 的 是 什么 呢 ? 当然 是 形状 ! “(也 可 能 是 文本 或 
舱 入 的 图 像 ， 这 些 我 们 将 在 后 面 介绍 ,) SVG 只 有 少数 不 同 的 形状 元 素 : 
<rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon> 以 及 <path>。 
但 是 ， 最 后 三 种 能 够 以 一 定 的 精确 度 ， 定 制 你 能 想象 的 任何 形状 。 特 别 是 
<path>， 我 们 可 以 通过 它 自己 的 特性 来 描绘 曲线 和 线条 ， 以 此 来 创建 形状 。 


1.6 图片 中 可 以 包含 图 片 


每 个 SVG 都 是 一 张 图 片 ， 但 是 它 同时 也 是 一 个 文档 ， 文 档 中 可 以 通过 使 用 
<image> 标签 来 包含 其 他 图 片 。 先 入 的 图 片 可 以 是 其 他 SVG 文件 ， 也 可 以 
ze PNG 或 JPEG 等 光栅 图 片 。 然 而 ， 出 于 安全 和 性 能 的 考虑 ，SVG 有 时 用 
于 避免 外 部 图 片 (以 及 其 他 外 部 资源 ， 比 如 样式 表 和 字体 ) 被 下 载 。 尤 其 
是 当 SVG 在 HTML 页 面 中 作为 幅 入 图 片 (<img> 元 素 ) 或 者 背景 图 片 被 显 
示 时 ， 我 们 将 不 能 使 用 外 部 文件 。 


1.7 文本 也 是 艺术 


SVG 的 最 后 一 个 用 途 是 构建 文本 。 但 是 文本 不 是 图 形 的 替代 ， 构 成 文本 的 
字母 将 会 像 其 他 类 型 的 矢量 图 形 一 样 被 处 理 。 尤 为 重要 的 是 ， 文 本 可 以 使 
用 与 矢量 形状 完全 相同 的 样式 属性 来 绘制 。 


1.8 艺术 源 于 数学 


所 有 矢量 图 形 (形状 或 文本 ) 的 核心 是 ， 使 用 每 个 元 素 的 浏览 器 SVG 演 染 
函数 中 的 数学 参数 XML 属性 )， 控 制 最 终 效 果 。SVG 中 最 基本 的 数学 概 
念 是 坐标 系 ， 用 于 确定 图 形 中 每 一 个 点 的 位 置 。 我 们 可 以 通过 设置 viewBox 
属性 来 设置 初始 坐标 系 ， 然 后 通过 坐标 系 的 转换 来 移动 、 拉 伸 、 旋 转 、 倾 
斜 特 定 元 素 。 


1.9 SVG 是 无 数 canvas 的 有 限 集 

在 计算 机 精度 允许 的 范围 内 ， 可 以 给 矢量 形状 添加 任意 多 个 坐标 。 不 
过 最 终 显 示 的 是 viewBox 属性 建立 的 特定 范围 坐标 内 的 形状 。 通 过 给 
preserveAspectRatio 设置 不 同 的 值 来 控制 在 宽 高 比 不 匹配 时 ， 如 何 把 坐标 
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的 范围 缩放 到 视图 区 域 (viewport) 。 


RE <svg> 元 素 或 复 用 <symbol> 元 素 可 以 创建 租 套 的 视 口 ， 它 们 除了 提供 
控制 宽 高 比 的 区 域外 ， 还 定义 了 确定 子 元 素 百 分 比值 的 依据 。 其 他 元 素 还 
可 以 使 用 viewBox 属性 来 创建 一 个 伸缩 到 合适 大 小 的 效果 (我们 将 在 第 11 
章 的 <pattern> 元 素 中 学 习 ) ， 而 不 用 重新 去 定义 百分比 。 


1.10 SVG 是 有 结构 的 


SVG 的 结构 包括 浑 染 到 屏幕 上 的 基本 形状 、 文 本 和 图 片 以 及 用 来 定义 几何 
图 形 的 属性 。 我 们 可 以 按照 逻辑 来 把 元 素 进行 分 组 ， 以 此 来 创建 更 加 丰富 
的 SVG。 我 们 可 以 给 不 同 的 组 设置 不 同 的 样式 或 者 转换 其 坐标 系 ， 还 可 以 
给 它们 添加 可 访问 名 称 和 描述 来 解释 图 形 到 底 表 示 什 么 。 


1.11 SVG 是 有 样式 的 


SVG 图 形 可 以 仅仅 由 所 有 的 样式 信息 都 通过 属性 来 设置 的 XML 元 素 组 成 。 
当然 ， 这 些 和 表现 相关 的 样式 也 可 以 通过 CSS 规则 来 设 定 ， 比 如 通过 class 
或 者 元 素 类 型 来 控制 。 还 可 以 使 用 媒体 属性 或 瞬时 状态 等 有 条 件 的 CSS 样 
式 ， 比 如 :hover 和 :focus。 


严格 分 开 几 何 结构 (XML 属性 ) 和 表现 样式 (表现 属性 或 者 CSS 样式 规 
WU) 是 有 些 武 断 的 。 随 着 SVG 的 发 展 ， 这 两 者 之 间 的 界限 将 越 来 越 模糊 。 
SVG 2 的 规范 草案 把 许多 布局 属性 升级 为 表现 属性 。 这 便 可 以 通过 灵活 的 
CSS 语法 来 提供 以 下 特性 : 通过 类 给 相似 元 素 设置 一 个 差不多 的 尺寸 ， 然 
后 再 通过 CSS 伪 类 或 媒体 查询 来 修改 具体 的 尺寸 或 布局 。 


1.12 ”所 有 好 用 的 标记 都 基于 伟大 的 DOM 


浏览 器 会 把 SVG 标记 和 样式 转换 成 一 个 文档 对 象 模型 (document object 
model, DOM), DOM 可 以 通过 JavaScript 进行 操作 。 针 对 XML 内 容 的 
DOM 的 所 有 核心 方法 同样 适用 ， 所 以 我 们 可 以 创建 和 重 排 元 素 ， 获 取 和 设 
置 属 性 的 值 ， 查 询 计算 后 的 样式 的 值 。 


SVG 规范 还 定义 了 SVG DOM 元 素 特有 的 属性 和 方法 ， 这 使 得 我 们 可 以 更 
简单 地 从 数学 角度 操作 几何 图 形 。 浏 览 器 对 SVG DOM 的 支持 可 能 不 尽 如 
人 意 ， 但 一 些 方法 一 一 比如 确定 一 条 曲线 的 长 度 一 一 在 SVG 的 设计 中 是 不 
可 或 缺 的 。 
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1.13 SVG 是 可 移动 的 


在 支持 脚本 的 动态 SVG 查看 器 (比如 Web 浏览 器 ) 中 ， 可 以 使 用 脚本 来 创 

建 动画 和 可 交互 的 图 形 。SVG 还 支持 交互 的 声明 方式 ， 你 可 以 定义 整个 交 

互 的 克 围 ， 浏 览 器 通过 自己 的 优化 方式 来 应 用 它 。 这 有 两 种 实现 方式 。 

。 借鉴 SMIL (Synchronized Multimedia Integration Language， 同 步 多 媒体 
集成 语言 ) 的 语法 ， 在 标记 中 使 用 动画 元 素 。 

。 在 表现 样式 中 使 用 CSS 动画 和 过 渡 。 

在 编写 本 书 的 时 候 ， 脚 本 动画 已 经 得 到 所 有 Web 浏览 器 的 支持 ， 但 可 能 天 

Ay SVG 的 某 些 用 途 而 受到 阻 得。 声明 式 动画 (SMIL 和 CSS) 在 大 多 数 浏 

览 器 中 也 得 到 了 支持 ， 但 并 不 是 所 有 (IE 浏览 器 显然 是 个 例外 ) 。 此 外 ， 浏 

览 器 也 开始 实现 新 的 Web 动画 API， 这 将 使 得 脚本 可 以 像 声 明 式 动画 那样 

定义 和 触发 独立 运行 的 动画 。 


1.14 SVG 在 发 展 变化 


在 你 与 SVG 交互 时 ， 不仅 SVG 图 形 可 以 单独 改变 ，SVG 的 定义 也 可 以 改 
变 。 目 前 (撰写 本 书 时 ) 的 既定 标准 是 SVG 1.1， 但 具有 新 特性 和 更 明确 地 
定义 已 有 特性 的 SVG 2 规范 正在 制定 中 。 此 外 ， 由 于 SVG 使 用 了 CSS 和 
JavaScript， 并 且 由 于 它 很 大 程度 地 集成 在 HTML 中 ， 这 些 语言 的 变化 也 将 
影响 SVG。 
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如 果 我 让 你 画 一 个 黄色 的 圆 ， 然 后 给 它 加 一 个 蓝 色 的 轮廓 ， 它 看 起 来 会 和 
画 一 个 蓝 色 的 圆 并 用 黄色 填充 的 效果 一 样 吗 ? 


如 果 我 让 你 画 一 个 红色 的 五 边 形 和 一 个 绿色 的 正方 形 ， 且 它们 的 中 心 点 是 
页 面 中 的 同一 点 ， 图 片 的 大 部 分 会 是 红色 还 是 绿色 ? 


在 用 手 画 图 时 是 没有 固定 规则 的 。 如 果 有 人 给 了 了 你 模棱两可 的 指示 ， 你 通 
常会 向 他 寻求 解释 。 但 是 当 你 向 计算 机 发 出 指令 时 ， 它 只 能 按 着 你 的 要 求 
执行 ， 所 以 你 必须 保证 能 准确 地 表达 你 的 意思 。 

即使 你 使 用 SVG 很 长 时 间 了 (我 们 假设 你 至 少 使 用 过 一 段 时 间 )， 也 很 可 能 
没有 深入 思考 过 计算 机 是 如 何 把 SVG 代码 转换 成 屏幕 上 的 彩色 图 案 的 。 如 
果 你 的 确 要 画 许多 这 样 的 彩色 图 案 ， 就 需要 知道 你 的 指令 是 如 何 被 解析 的 。 


本 章 将 讨论 SVG 泻 染 模型 的 基本 原理 ， 也 就 是 计算 机 解析 SVG 标记 和 样 
式 来 生成 图 画 的 过 程 ， 还 将 回顾 定义 SVG 图 形 和 文本 绘制 方式 的 基本 属 
性 一 一 fill 和 stroke。 本 书 其 余部 分 的 内 容 可 以 概括 为 定义 fill 或 stroke 
属性 值 的 不 同方 式 。 


SVG 的 渲染 模型 被 称 为 画家 模型 。 就 像 在 墙 上 涂 层 ， 上 层 的 内 容 会 遮盖 下 
层 的 内 容 。SVG 规范 定义 了 哪些 内 容 放 在 其 他 内 容 之 上 。 本 章 还 会 讨论 
z-index 和 paint-order 这 两 个 允许 你 改变 渲染 规则 的 属性 。 这 两 个 属性 由 
SVG 2 引入 ， 并 且 刚 刚 开 始 在 一 些 Web 浏览 器 中 得 到 支持 。 所 以 我 们 也 会 
介绍 如 何 用 SVG 1.1 的 代码 来 实现 相同 的 效果 。 





































































































2.1 使 用 fill 属 性 进行 填充 


SVG 代码 中 的 基本 元 素 和 属性 可 以 精确 地 定义 几何 形状 。 例 如 创建 一 个 1 
平方 英寸 的 正方 形 ， 它 的 左上 角 就 是 坐标 系 的 原点 ， 代 码 如 下 所 示 : 


<rect width="1in" height="1in" /> 


创建 一 个 直径 为 10 厘米 的 圆 ， 并 把 它 放 置 在 坐标 系 的 中 心 ， 代 码 如 下 : 
<circle cx="50%" cy="50%" r="5cm" /> 


本 书 不 准备 花费 大 量 的 时 间 去 讲解 你 画 的 图 形 的 几何 结构 。 
但 需要 注意 的 是 ，SVG 通常 会 被 缩放 ， 所 以 英尺 、 厘 米 等 
长 度 单位 不 一 定 符合 真实 世界 的 距离 。 它 会 受到 显示 器 的 
分 辩 率 、 浏 览 器 的 缩放 程度 ， 当 然 还 有 SVG 元 素 上 添加 的 


viewBox 或 transform 等 属性 的 影响 。 


缩放 对 所 有 单元 产生 的 影响 是 相同 的 。 通 常 每 英寸 包含 的 厘 
KE (2.54) 和 你 用 尺子 量 是 一 样 的 。 除 了 最 古老 的 浏览 器 ， 
CEPT AD bias 4, Lin 也 总 是 等 于 96px (CSS 像素 单位 )， 同 
样 也 等 于 96 个 SVG 无 单位 用 户 坐 标 值 。SVG 无 单位 坐标 通 
第 可 以 和 px 等 价 使 用 。 其 他 的 SVG 软件 同样 也 遵循 这 项 在 
CSS Values and Units Module Level 3 中 建立 的 标准 。 






























































如 果 在 你 的 SVG 中 仅仅 包含 一 个 圆 或 一 个 长 方形 的 标记 (或 其 他 任何 形状 
或 文本 ) 而 没有 其 他 的 样式 信息 ， 它 将 在 你 定义 的 尺寸 内 显示 一 个 纯 黑 色 
的 区 域 。 这 是 因为 fill 属性 的 默认 值 是 纯 黑 色 。 


fill 属性 告诉 SVG 浑 染 软件 如 何 操作 几何 形状 。 对 于 屏幕 上 的 每 一 个 像素 
(可 以 对 比 纸 上 的 每 一 个 墨 斑 )， 软 件 都 可 以 确定 该 点 是 不 是 在 形状 之 内 。 
如 果 该 点 在 形状 之 内 ， 软 件 就 会 填充 fill 的 值 ， 然 后 确定 下 一 步 怎 么 做 。 


在 简单 的 例子 (如 上 默认 黑色 ) 中 ， 填 充值 是 一 种 颜色 ， 且 形状 内 所 有 的 点 
都 用 该 颜色 替换 。 在 其 他 情况 中 ， 填 充值 可 能 是 一 个 查找 更 加 复杂 的 绘画 
代码 的 指令 。 该 指令 是 通过 引用 一 个 SVG 元 素 的 id 的 URL 来 表示 的 (一 
种 泻 当 服务， 我们 将 在 第 5 章 深入 讨论 )。 











如 果 你 不 想 让 软件 填充 形状 ， 可 以 把 fitt 属性 值 设 置 为 none, 








Fill 属性 〈 以 及 stroke 属性 ) 的 最 后 一 个 可 以 设置 的 值 是 currentColor 
关键 词 。 这 一 关键 词 通常 被 估算 为 给 定 元 素 的 CSS color 属性 的 当前 值 。 
color 属性 本 身 对 SVG 没有 直接 的 影响 ， 但 是 结合 currentCotor， 它 将 有 
两 个 主要 用 途 。 


。 使 内 联 的 SVG 图 标 与 它 周 围 的 HTML 文本 颜色 协调 。color 属性 的 主要 
用 途 是 设置 CSS 样式 文本 的 颜色 。 因 此 ， 使 用 currentColor 值 的 内 联 
SVG 图 形 会 继承 周围 HTML 标记 的 文本 颜色 。 

。 为 重复 使 用 的 内 容 提供 一 个 间接 继承 的 样式 值 。 使 用 <use> 元 素 复制 的 
SVG 图 形 可 以 从 使 用 它 的 上 下 文中 继承 fill 和 stroke 等 样式 。 给 重复 
使 用 的 图 形 中 的 重要 属性 使 用 currentcolor， 这 样 可 以 通过 改变 <use> 
元 素 上 的 color 值 来 分 开 操作 复 用 图 形 的 Fill 和 stroke 的 值 。 

默认 情况 下 ，fitLL 属性 被 泻 染 为 纯色 且 不 透明 (除非 在 泻 染 服务 中 有 不 同 

的 指令 )。 可 以 通过 给 Fill-opacity 属性 设 定 值 来 调整 不 透明 度 ， 它 接受 一 

个 小 数 作为 值 : 0 到 1 之 间 的 值 会 导致 填充 值 和 背景 色 混 合 起 来 浑 染 图 形 ， 

值 为 1 (默认 值 ) 时 表示 不 透明 ， 值 为 0 时 的 效果 相当 于 设置 fill 属性 的 

值 为 none。 我 们 将 在 第 4 章 中 讨论 不 透明 度 。 


当 你 不 能 确定 图 形 的 某 一 部 分 是 在 图 形 之 内 还 是 之 外 时 ，fiLL-rute 属性 可 
以 给 计算 机 发 送 精确 的 指令 。 它 会 影响 内 部 有 洞 的 <path> 元 素 以 及 路 径 、 
多 边 形 和 纵横 交错 的 折线 。 

fill-rule 属性 有 两 个 可 选 值 。 


。 evenodd 值 的 每 一 条 边缘 线 都 分 隔 开 了 图 形 的 内 部 和 外 部 。 
nonzero 值 (默认 值 ) 是 当 你 从 头 到 尾 治 着 一 个 方向 画 交 叉 的 边线 时 企 
图 得 到 “更 多 的 内 部 空间 >” ， 并 且 只 有 你 在 图 形 内 部 沿 着 相反 方向 绘画 来 
撤销 它们 时 才 会 返回 图 形 外 部 。 
例 2-1 画 的 是 一 个 纵横 交错 的 <polygon>， 第 一 个 使 用 默认 的 nonzero 填充 
规则 ， 另 一 个 使 用 evenodd 填充 规则 。 图 2-1 显示 了 泻 染 结果 。 图 形 的 边 上 
有 细 细 的 描 边 ， 所 以 即使 你 填充 了 边线 的 两 人 出， 也 可 以 看 到 形状 。 




















































































































2-1 {FA nonzero 填充 规则 的 多 边 形 (£) 和 使 用 evenodd 填充 规则 的 多 边 形 (4) 
例 2-1 使 用 fill-rule 属性 改变 填充 区 域 


<svg xmlns="http: //www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xLink" 
viewBox="0 0 400 200" width="4in" height="2in"> 
<title xml: lang="en">Fill-rule comparison</title> 
<rect fill="LightSkyBlue" height="100%" width="100%" /> (1) 


<polygon id="p" 
fill="blueViolet" stroke="navy" 
points="20,180 20,20 180,20 180,180 60,60 140,60" /> @ 
<use Xlink:href="#p" x="50%" fill-rule="evenodd" /> 
</svg> 


O 最 初 的 <svg> 元 素 建 立 了 坐标 系 ， 并 且 设 置 了 图 形 绘画 的 默认 尺寸 。 
<rect> 元 素 增 加 了 一 个 纯色 背景 。 在 这 段 简单 的 SVG 代码 中 ， 我 们 直 
接 在 表现 属性 上 设置 样式 。 

O 最 基本 的 拥有 Fill 和 stroke 样式 的 多 边 形 ， 它 的 fiLL-rute 属性 将 继 
承 默认 的 nonzero 值 。 


O 一 个 水 平移 动 SVG 一 半 宽 度 的 同一 个 多 边 形 的 副本 。 复 制 的 多 边 形 将 
继承 在 <use> 元 素 上 设置 的 fill-rule 的 值 evenodd. 

无 论 边 线 或 者 子路 径 相互 交 叉 多 少 次 ， 每 个 点 不 是 在 图 形 内 部 就 是 在 图 形 

外 部 。 每 个 区 域 不 会 因为 它 在 两 个 不 同 的 子路 径 内 而 被 绘画 两 次 。 当 使 用 

纯色 填充 时 这 点 差别 看 似 没 有 多 大 意义 ， 但 使 用 部 分 透明 来 填充 时 它 就 变 

得 非常 重要 。 











聚焦 未 来 

未 来 的 填充 
本 节 讨 论 的 Fill 属性 都 是 基于 当前 已 经 发 布 的 稳定 的 SVG 1.1 规范 。 在 制 
定 中 的 SVG 2 规范 将 提供 更 加 灵活 的 方式 去 填充 图 形 ， 尤 其 值得 关注 的 是 
允许 单个 图 形 拥 有 多 个 填充 层 。 这 些 被 提 及 的 特性 将 在 本 书 其 他 部 分 作 更 
详细 的 讨论 ， 同 样 也 是 在 这 样 的 “聚焦 未 来 ”附注 栏 中 。 


SVG 中 的 每 个 图 形 和 文本 都 可 以 被 填充 ， 且 默认 是 填充 的 。 这 包括 不 闭合 
的 <path> 元 素 和 <polyline> 元 素 ， 它 们 可 以 定义 一 个 结束 点 不 与 起 始点 
相连 的 图 形 。 这 些 图 形 会 创建 一 个 结束 点 和 起 始点 用 直线 相连 的 填充 区 域 。 
如 果 在 结束 时 与 其 他 的 边 有 交叉 ，fiLL-rute 属性 就 会 计算 并 应 用 。 









































<path> 中 没有 闭合 的 片段 是 通过 连接 到 子路 径 的 初始 点 来 闭 
合 的 : 最 后 的 点 是 通过 一 个 move-to 命令 创建 的 。 

















即使 是 一 个 <Line> 元 素 严 格 来 说 也 是 默认 填充 的 : 因为 连接 终点 与 起 始点 
的 返回 线 与 原 线 完全 重合 ， 所 以 最 后 的 形状 不 包括 任何 区 域 。 形 状 内 是 没 
有 点 的 ， 所 以 没有 点 被 填充 值 影响 。 如 果 你 想 看 到 它 ， 就 得 给 它 加 stroke. 


2.2 ”使 用 stroke 属 性 描 边 


在 计算 机 图 形 中 ， 给 形状 描 边 的 意思 是 指 沿 着 它 的 边 画 一 条 线 。 不 同 的 程 
序 对 描 边 的 含义 会 有 不 同 的 解析 。 

在 SVG 中 (目前 如 此 )， 描 边 的 实现 方式 是 沿 着 主 形状 的 边线 向 内 和 向 外 
延伸 出 辅助 形状 。 该 描 边区 域 使 用 与 填充 主 形状 相同 的 方式 来 泻 染 : 软件 
会 依次 扫描 并 确定 某 个 点 是 否 在 描 边 区 域 的 内 部 。 如 果 在 ， 软 件 就 会 使 用 
stroke 属性 设置 的 泻 染指 令 来 设置 颜色 。 





























描 边 形状 的 每 个 部 分 都 只 会 绘制 一 次 ， 无 论 形状 中 是 否 存 在 
不 同 边 重合 或 交 又 的 部 分 。 





stroke 的 默认 值 是 none, BIA Bet a. Hes fiLL 属性 一 样 ， 它 的 值 
还 可 以 是 色 值 或 演 染 服务 元 素 的 引用 。 
就 像 fill-opacity 属性 会 改变 Fill 的 效果 一 样 ， 描 边 同样 也 有 stroke- 
opacity 属性 来 改变 它 的 效果 。 第 4 章 会 详细 讨论 fill-opacity 和 stroke- 
opacity 属性 。 
还 有 许多 与 描 边 相关 的 属性 ， 本 书 不 准备 用 大 量 篇 幅 去 讨论 它们 。 但 需要 
知道 ， 它 们 可 以 控制 描 边 区 域 的 几何 形状 。 以 下 是 这 些 属 性 的 大 致 介绍 。 
stroke-width 
描 边 宽度 ， 即 描 边 的 粗细 。 其 值 可 以 是 长 度 值 、 用 户 单位 数 或 者 坐标 系 
宽 和 高 的 加 权 百 分 比 。 在 SVG 1.1 中 ， 描 边区 域 通常 以 形状 的 边 为 中 心 ， 
所 以 描 边 的 一 半 宽 度 在 形状 之 内 ， 一 半 在 形状 之 外 。 
stroke-linecap 
该 属性 用 来 给 未 闭合 的 路 径 或 线条 设置 描 边 样式 。 其 默认 值 butt 会 紧密 
修剪 摘 边 并 且 与 端点 垂直 。 其 他 选项 (round 和 square) 会 以 特定 形状 
( 即 分 别 以 半圆 形 和 方形 ) 使 用 一 半 的 描 边 宽度 来 延伸 描 边 。 
stroke-linejoin 
该 属性 用 于 指定 在 形状 中 拐角 的 描 边 样式 。 其 默认 值 miter 在 直线 上 延 
描 边 ， 直 到 两 条 边 在 某 一 点 相 汇 。 其 他 可 选 值 是 round (使 用 圆 弧 来 
连接 两 条 描 边 ) 和 bevel (使 用 一 根 额外 的 直线 连接 两 条 描 边 )。 
stroke-miterlimit 
延伸 斜 接线 可 以 超出 形状 边线 的 最 大 距离 ， 是 描 边 宽度 的 倍数 (默认 
是 宽度 的 四 倍 )。 如 果 描 边 在 这 个 距离 之 内 没有 汇合 ， 则 使 用 stroke- 
Linejoin 值 为 bevel 时 的 效果 。 
stroke-dasharray 
定义 给 形状 间断 描 边 时 的 距离 模式 ( 线 和 间隔 )。 其 默认 值 none 会 给 
整个 形状 添加 连续 的 描 边 。 每 一 条 线 的 端点 都 受 stroke-Linecap {HAY 
影响 。 
stroke-dashoffset 
定义 间断 描 边 时 起 始 偏 移 的 距离 。 默 认 值 是 0。 
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2-2: 描 边 形状 变化 的 折线 。 从 左 到 右 ，stroke-Linejoin 属性 值 分 别 为 round、 
bevel 和 miter。 从 上 到 下 ，stroke-Linecap 属性 值 分 别 为 round、butt 和 
square。 最 后 一 行 ， stroke-Linecap 属性 值 为 square A stroke-width 更 粗 


例 2-2 在 同样 的 折线 上 混合 搭配 使 用 不 同 的 stroke-Linejotn 和 stroke- 
Linecap 属性 值 ， 生 成 的 结果 如 图 2-2 所 示 。 





例 2-2 控制 描 边区 域 的 几何 形状 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
viewBox="0 0 400 400" width="4in" height="4in" 
xml: Lang="en"> 
<title>Stroke join and cap styles compared</title> 
<style type="text/css"> 
.backdrop { 1) 
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fill: peachPuff; 


} 

.Shapes { 
fill: none; 
stroke: indigo; 
stroke-width: 8px; 

} 


-join-round { 
stroke-Linejoin: round; 
} 


.join-beveL { 
stroke-Linejoin: bevel; 

} 

-join-miter { 
stroke-Linejoin: miter; 
stroke-miterlimit: 10; 

} 

-cap-round { 
stroke-Linecap: round; 


} 

-cap-butt { 
stroke-linecap: butt; 

} 


.cap-square { 
stroke-linecap: square; 
} 
.wider { 
stroke-width: 14px; 
} 
</style> 
<defs> 
<polyline id="p2" 
points="20,20 20,80 100,80 40,20 100,20" /> @ 
</defs> 
<rect class="backdrop" height="100%" width="100%" /> 


<g class="shapes"> 
<g class="cap-round"> 
<title>Round line caps</title> 
<g id="row"> © 
<use xlink:href="#p2" x="0" class="join-round"> 
<title>Round line joins</title> 
</use> 
<use Xlink:href="#p2" x="35%" class="join-bevel"> 
<title>Beveled line joins</title> 
</use> 
<use xlink:href="#p2" x="70%" class="join-miter"> 
<title>Mitered line joins</title> 





</use> 
</g> 
</g> 
<g class="cap-butt"> @ 
<title>Butt (cropped) line caps</title> 
<use xlink:href="#row" y="25%" /> 
</g> 
<g class="cap-square"> 
<title>Square line caps</title> 
<use xlink:href="#row" y="50%" /> 
</g> 
<g class="cap-square wider"> O 
<title>Square line caps with a wider stroke</title> 
<use xlink:href="#row" y="75%" /> 
</g> 
</g> 
</svg> 


O 在 这 个 更 加 复杂 的 例子 中 ， 使 用 CSS 规则 的 样式 块根 据 它们 的 类 来 给 元 
素 设 置 ftLL 和 stroke 属性 值 。 

O 在 <defs> 部 分 里 预先 定义 基本 的 <polyline> 形状 。 

© 复制 三 份 折线 并 将 其 排列 到 对 比 网 格 的 一 行 中 。 每 一 个 都 有 不 同 的 
stroke-Linejoin 样式 。 

O 复制 一 整 行 并 垂直 移动 ， 每 次 都 分 配 一 个 新 的 stroke-Linecap 样式 。 

O 最 后 一 行 继承 了 不 同 的 stroke-width 值 。 

与 填充 不 同 的 是 ， 描 边区 域 会 受到 未 闭合 路 径 的 影响 。 给 <polyline> 元 素 

和 设置 相同 点 的 <polygon> 元 素描 边 看 起 来 是 不 一 样 的 。 使 用 z 命令 闭合 的 


<path> 元 素 (或 其 子路 径 ) 会 有 一 条 线 连接 终点 和 起 始点 ， 而 开放 的 子路 
径 的 起 始点 和 终点 都 是 端点 。 








聚焦 未 来 
下 一 代 描 边 
描 边 属性 在 SVG 2 中 也 将 有 所 改变 ， 它 将 允许 每 个 形状 有 多 个 描 边 层 。 许 
多 关于 更 好 地 控制 描 边 几何 形状 的 提案 也 正在 被 考虑 ， 它 们 将 在 一 个 单独 
的 SVG 描 边 模块 上 进行 开发 。 





2.3 ERAMA 


当 一 个 图 形 同 时 拥有 填充 属性 和 描 边 属性 时 ， 描 边区 域 和 填充 区 域 会 有 一 
部 分 重合 的 地 方 ， 因 此 重合 部 分 会 有 两 种 特定 的 颜色 。 在 所 有 的 SVG 中 ， 
画家 模型 都 适用 : 如 果 两 种 颜色 都 是 不 透明 的 ， 则 上 层 的 颜色 将 会 替换 下 
层 的 颜色 。 


但 是 哪 一 层 是 在 “上 面 ”的 呢 ? 


默认 情况 下 ， 描 边 是 泻 染 在 填充 层 之 上 的 。 这 意味 着 你 通常 可 以 看 到 整个 
描 边 宽度 ， 也 意味 着 如 果 描 边 是 半 透 明 的 话 ， 将 显示 出 两 种 颜色 。 填 充 的 
颜色 将 会 出 现在 描 边区 域内 部 一 半 之 下 而 不 是 外 部 一 半 之 下 。 






































描 边 标 记 一 一 自 定义 形状 拐角 显示 的 标 ; 是 在 填充 和 描 


去 一 一 
边 之 后 泻 染 的 ， 按 照 路 径 从 头 到 尾 的 顺序 。 





在 SVG 1.1 中 ， 在 把 描 边区 域 放 到 填充 区 域 下 的 唯一 方式 是 分 成 两 个 形状 : 
一 个 仅仅 描 边 ， 然 后 把 相同 的 图 形 复制 到 同一 位 置 〈 使 用 <use> 元 素 ) 并 
仅 填 充 不 描 边 。 
<g stroke="blue" fill="red"> 
<g fill="none"> 
<path id="shape" d="..." /> 
</g> 
<use xlink:href="#shape" stroke="none" /> 
</g> 
前 面 的 代码 片段 使 用 了 大 量 继承 的 样式 。<path> 本 身 没有 设置 任何 的 fill 
和 stroke 属性 ， 而 是 从 它 的 外 层 继承 的 。 总 的 stroke 和 fill 属性 设置 在 
外 层 的 <g> 元 素 上 ， 之 后 在 垦 套 的 组 和 <use> 元 素 上 分 别 抵消 了 fitl 属性 
和 stroke 属性 。 


SVG 2 中 引入 了 paint-order 属性 ， 使 得 这 样 的 效果 更 容易 实现 。 它 使 用 空 
格 分 隔 的 关键 词 (stroke, fill 以 及 markers) 列表 来 指示 图 形 的 各 部 分 被 
泻 染 的 顺序 。 所 以 可 以 用 单个 元 素 实 现 相 同 的 效果 : 


<path id="shape" d="..." stroke="blue" fill="red" 
paint-order="stroke fill" /> 


你 在 paint-order 属性 中 没有 定义 的 泻 染 层 将 会 在 之 后 泻 当 (本 例 中 的 






























































markers)， 并 按照 它们 本 来 的 顺序 泻 染 。 这 意味 着 如 果 你 想 调换 fill 和 
stroke 的 顺序 ， 仅 需要 定义 stroke 就 可 以 了 。 
<path id="shape" d="..." stroke="blue" fill="red" 
paint-order="stroke" /> 
stroke 将 会 最 先 被 演 染 ， 然 后 是 ftLL， 最 后 是 markers。 整 个 填充 区 域 将 
始终 可 见 ， 即 使 是 与 描 边 重合 的 地 方 。 
paint-order 的 默认 值 (等 于 fill stroke markers) 可 以 用 normal 关键 词 
显 式 地 设置 。 
在 编写 本 书 的 时 候 ，paint-order 属性 在 最 新 的 Firefox (从 
31 版 本 开始 )、Blink (从 35 版 本 的 Chromium 开始 ) 以 及 
WebKit (从 2014 46 3 月 开始 ) 中 得 到 支持 。IE/Edge 以 及 其 
他 老 版 本 的 浏览 器 使 用 的 是 默认 的 泻 染 顺序 。 








控制 泻 染 顺序 的 能 力 在 文本 中 尤为 重要 。SVG 中 的 文本 可 以 像 形状 一 样 通 
过 描 边 来 创建 轮 廊 的 效果 。 然 而 ， 即 使 最 细 的 描 边 也 会 遮盖 字母 的 细 方 。 
通过 在 描 边 之 上 渲染 填充 区 域 (在 颜色 不 同 的 时 候 )， 你 可 以 加 强 字母 的 形 
状 并 恢复 它 的 易 读 性 。 例 2-3 使 用 paint-order 和 一 个 很 粗 的 描 边 给 标题 文 
本 加 了 一 个 清晰 的 轮廓 。 图 2-3 是 在 支持 的 浏览 器 中 显示 的 结果 。 




















2-3; 在 填充 之 下 描 边 的 Outlined 文本 
例 2-3 描 边 没有 遮 住 文本 的 细节 


<svg xmlns="http://www.w3.org/2000/svg" 

viewBox="0 0 400 80" width="4in" height="0.8in" 
xml: Lang="en"> 
<title>Outlined text, using paint-order</title> 
<rect fill="navy" height="100%" width="100%" /> 
<text x="50%" y="70" 

text-anchor="middle" 

font-size="80" 

font-family="sans-serif" 





fill="mediumBlue" 

stroke="gold" 

stroke-width="7" 

paint-order="stroke" 

>Outlined</text> 
</svg> 


如 果 完 全 依赖 paint-order 来 实现 这 种 效果 ， 那 你 的 文本 在 不 支持 的 浏览 器 
中 将 表现 得 一 塌 糊 涂 ， 如 图 2-4 所 示 。 所 以 应 该 要 有 备 选 策略 。 



































图 2-4: 使 用 默认 泻 染 顺序 描 边 的 Outlined 文本 


一 种 解决 方式 是 使 用 CSS 的 @supports 条 件 规则 来 控制 只 有 在 支持 paint- 
order 属性 时 才 添 加 轮廓 效果 。 其 他 情况 下 ， 如 果 设 有 达到 预期 的 效果 ， 就 
使 用 不 同 的 样式 来 提供 清晰 的 文本 。 


例 2-4 是 例 2-3 代码 的 一 个 变形 。 样 式 从 表现 属性 上 移 到 了 style 代码 块 
中 ， 这 样 就 可 以 使 用 CSS 的 条 件 规则 了 。 基 本 的 样式 是 在 不 能 控制 谊 染 顺 
序 的 时 候 提 供 更 细 的 描 边 ， 在 esupports 块 中 使 用 粗 的 描 边 和 paint-order 
属性 来 覆盖 基本 样式 。 


例 2-4 使 用 paint-order 属性 前 先 测试 是 否 支持 
<svg xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 400 80" width="4in" height="0.8in" 
xml: Lang="en"> 



































<title>Using @supports to adjust paint-order effects</title> 
<style type="text/css"> 
-outlined { 

text-anchor: middle; 

font-size: 80px; 

font-family: sans-serif; 

fill: mediumBlue; 

stroke: gold; 

/* fallback */ 

stroke-width: 3; 





@supports (paint-order: stroke) { 
-outlined { 
stroke-width: 7; 
paint-order: stroke; 
} 
} 
</style> 
<rect fill="navy" height="100%" width="100%" /> 
<text x="50%" y="70" class="outlined" 
>Outlined</text> 
</svg> 


在 支持 paint-order 的 浏览 器 (目前 这 些 浏 览 器 也 都 支持 @supports 规则 ) 


中 的 运行 结果 如 图 2-3 所 示 。 修 改 之 后 的 代码 在 其 他 浏览 器 中 的 运行 结果 如 
2-5 所 示 。 

















2-5; 当 不 支持 paint-order 时 给 文本 添加 更 细 的 描 边 














图 2-3 和 图 2-5 之 间 stroke-width 的 值 被 裁 掉 一 半 还 多 。 但 
是 图 2-5 中 描 边 仅仅 略微 窗 一 点 ， 这 是 因为 描 边 内 部 的 一 半 
在 填充 之 上 是 可 见 的 。 























如 果 你 不 能 接受 使 用 @supports 来 改变 展现 规则 ， 唯 一 的 替代 方案 就 是 复 
制 两 个 相同 的 元 素 ， 一 个 用 来 描 边 ， 一 个 用 来 填充 。 根 据 你 使 用 SVG 的 方 
式 以 及 对 样式 的 控制 程度 ， 必 要 时 可 以 使 用 脚本 来 控制 转换 。 由 于 paint- 
order 是 一 个 新 的 CSS 属性 ， 不 支持 它 的 浏览 器 不 会 把 它 添加 到 每 个 元 素 
的 style 属性 上 。 因 此 ， 你 可 以 检测 浏览 器 是 否 支 持 ， 并 在 需要 时 生成 额 
外 的 <use> 元 素 。 


例 2-5 中 提供 了 一 段 脚本 样 例 ， 它 通过 类 名 来 鉴定 元 素 并 在 需要 的 时 候 执行 
一 系列 操作 。 


























Gi 2-5 使 用 多 个 元 素来 模拟 paint-order 
<svg xmLns="http://www.w3.org/2000/svg" 
xmLns:XxLink="http://www.w3.org/1999/xLink" 
viewBox="0 0 400 80" width="4in" height="0.8in" 
xml: Lang="en"> 
<title>Faking paint-order with JavaScript</title> 
<style type="text/css"> 
-outlined { 

text-anchor: middle; 

font-size: 80px; 

font-family: sans-serif; 

Fill: mediumBlue; 

stroke: gold; 

stroke-width: 7; 

paint-order: stroke; 

} 

</style> 
<rect fill="navy" height="100%" width="100%" /> 
<text x="50%" y="70" class="outlined" 

>OutlLined</text> 
<script><! [CDATA[ 

(function(){ 
var NS = {svg: "http://www.w3.org/2000/svg", 
xlink: "http://www.w3.org/1999/xlink" 
E 

var index = 10000; 


var t = document.getElementsByClassName("outlined"); @ 


if ( t && 
(t[0].style["paint-order"] === undefined )){ (2) 
Array.prototype.forEach.call(t, fakeOutline) ; © 
} 


function fakeOutline(el){ 
el.id = el.id || "el-" + index++; @ 


var g1 = document.createElementNS(NS.svg, "g"); O 
g1.setAttribute("class", el.getAttribute("class") ); 
el.removeAttribute("class"); 
el.parentNode.insertBefore(g1, el); 


var g2 = document.createELementNS(NS.svg, "g"); O 
g2.style["fill"] = "none"; 
g2.insertBefore(el, null); 
g1.insertBefore(g2, null); 


var u = document.createElementNS(NS.svg, "use"); @ 
u.setAttributeNS(NS.xlink, "href", "#" + el.id); 
u.style["stroke"] = "none"; 





gi.insertBefore(u, null); 


} 
DO; 
]]> </script> 
</svg> 


@ 为 了 方便 在 脚本 中 访问， 用 一 个 特定 的 类 名 "outLined" 来 标示 要 修改 的 元 素 。 


O 可 以 检查 任何 元 素 (这 里 是 指 第 一 个 被 选中 的 元 素 ) 的 style 属性 ， 以 
确定 它 是 否 支 持 paint-order 属性 。 使 用 严格 相等 测试 (===) 来 区 别 空 
fA (元 素 上 没有 设置 内 联 样式 ) 和 undefined 值 (属性 名 无 法 识别 )。 


加 如果 需要 回 退 ， 就 会 在 每 一 个 有 "outlined" 类 名 的 元 素 上 调用 
fakeOutline() 方法 。 数 组 方法 forEach() 用 于 根据 需要 多 次 调用 该 方法 。 
由 于 getELementsByCLassName() 返回 的 列表 不 是 一 个 真正 的 JavaScript 数 
组 ， 所 以 不 能 使 用 t.forEach(fakeOutline). 取而代之 的 是 从 数组 原型 中 
提取 出 forEach( ) 方法 ， 并 使 用 自己 的 cal1() 方法 来 调用 。 


O fakeOutline() 方法 将 会 使 用 <use> 元 素来 复制 轮廓 元 素 ， 所 以 它 需 要 有 
一 个 有 效 的 id。 如果 它 本 身 没 有 ， 我 们 会 给 它 添加 一 个 唯一 的 随机 值 。 
O 把 元 素 的 类 复制 到 组 元 素 上 并 删除 元 素 本 身上 的 类 ， 并 用 组 元 素 替 换 原 
元 素 。 当 然 ， 这 要 求 所 有 填充 和 描 边 样式 都 定义 到 类 上 ， 而 不 是 通过 标 
签名 定义 或 通过 表现 属性 添加 。insertBefore() 方法 用 于 保证 新 的 组 元 

RE DOM 树 中 的 位 置 和 它 替换 的 元 素 相同 。 


O 级 套 的 组 元 素 是 用 于 保持 原 元 素 的 样式 ， 防 止 它 继承 填充 样式 。 

O 最 后 使 用 <use> 来 复制 元 素 ， 但 是 要 取消 描 边 样式 而 只 继承 填充 样式 。 
把 它 插入 到 主要 组 元 素 的 最 后 (在 null 之 前 )， 这 样 它 就 会 在 没有 填充 
样式 版 本 的 元 素 之 上 绘制 。 

脚本 运行 (在 不 支持 paint-order 的 浏览 器 上 ) 的 结果 如 图 2-6 所 示 。 虽 然 

它 看 起 来 和 图 2-3 一 样 ， 但 是 它 底层 的 DOM 结构 更 加 复杂 。 



























































2-6: 复制 文本 来 模拟 先 描 边 的 渲染 顺序 
如 你 所 见 ， 使 用 脚本 来 实现 这 样 一 个 简单 的 效果 是 很 麻烦 的 。 而 创建 一 个 
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通用 的 回 退 脚本 一 一 一 个 完整 的 属性 降级 方案 一 一 更 加 困难 ， 因 为 你 需要 
考虑 样式 属性 应 用 在 元 素 上 的 所 有 不 同方 式 。 实 际 上 ， 你 需要 重建 CSS 解 
析 器 的 工作 ， 识 别 所 有 的 样式 规则 并 丢弃 无 效 的 规则 。 


更 多 时 候 ， 如 果 最 终 的 效果 在 所 有 的 浏览 器 上 都 必 不 可 少 ， 则 在 你 的 标记 
中 创建 层级 的 描 边 和 填充 对 象 ， 直 接 创建 之 前 由 脚本 生成 的 结构 ， 这 样 更 
容易 。 
<g class="outlined"> 
<g style="fill: none;"> 
<text id="el-10000" x="50%" y="70">Outlined</text> 


</g> 
<use style="stroke: none;" xlink:href="#el-10000" /> 


</g> 
无 论 是 硬 编码 标记 还 是 由 脚本 动态 生成 标记 ， 在 文档 中 其 他 活跃 的 脚本 中 
都 必须 考虑 复杂 的 DOM 结构 。 























聚焦 未 来 
使 用 z-index 来 控制 排序 

当 不 同 的 形状 (或 其 他 内 容 ) LAHJA, GERVAHRAA: 形状 是 一 

个 一 个 被 泻 染 的 ， 最 后 泻 染 的 形状 将 会 在 顶部 。 

SVG 文档 中 的 层级 是 按照 代码 中 元 素 定 义 的 顺序 排列 的 : 形状 、 文 本 和 图 

片 者 会 按照 标记 定义 的 确切 顺序 来 分 层 。 在 SVG LIP, KER BRM 

序 的 唯一 方式 是 改变 元 素 在 DOM 中 的 顺序 。 

这 样 做 有 两 个 主要 问题 。 

。 它 会 迫使 你 打破 内 容 在 逻辑 上 的 分 组 。 例如， 如 果 不 使 用 <g> 元 素来 把 
文本 和 它 描 述 的 图 形 分 组 ， 你 通常 需要 把 文本 标记 移 到 文件 的 最 后 ， 这 
样 才 不 会 被 其 他 形状 遮挡 。 

。 你 不 能 通过 使 用 SMIL 或 CSS 动画 来 改变 看 到 的 层级 。 你 必须 通过 
JavaScript 来 操作 DOM， 这 可 能 会 带 来 性 能 问题 或 中 断 用 户 输入 的 焦点 。 

相 比 之 下 ，CSS (从 第 二 版 开始 ) 使 用 了 z-index 属性 来 布局 。 在 相同 的 

CSS 布局 层 司 上 下 文中 的 重合 元 素 (由 于 固定 或 相对 定位 或 者 负 的 外 边 距 

导致 ) 从 下 至 上 是 根据 z-index 属性 的 值 来 排序 的 。 确 切 的 属性 值 并 不 重 

要 ， 重 要 的 是 排列 的 顺序 。 

SVG 2 中 采用 z-index 来 重 排 SVG 的 层级 。 它 的 默认 值 是 0， 我们 可 以 给 





它 设 置 一 个 正 值 来 把 该 元 素 放 到 其 他 图 形 前 面 ， 或 者 设置 负 值 来 把 该 元 素 
放 到 后 面 。 


本 书写 作 时 ， 还 没有 主流 的 浏览 器 实现 SVG 元 素 的 z-index 
栈 。 


当 某 些 样 式 应 用 在 父 元 素 上 时 ，z-index 重 排 元 素 的 能 力 会 受到 限制 。 滤 
镜 、 遮 唱 以 及 不 透明 度 的 值 小 于 1， 都 会 导致 子 内 容 被 压 入 一 个 单独 的 栈 
中 ， 它 们 将 作为 一 个 整体 来 布局 。 


不 同 于 CSS 布局 ， 在 SVG 中 二 维 坐 标 系 的 转换 不 会 创建 一 
个 新 的 层 合 上 下 文 。 这 说 明 实际 上 变换 是 SVG 布局 中 很 正 


常 的 一 部 分 。 


使 用 JavaScript 来 取代 z-index 的 功能 需要 一 个 复杂 的 polyfill 库 ， 它 需要 扫 
描 所 有 样式 表 并 计算 每 个 元 素 最 终 的 层 登 值 。 导 致 事情 更 加 复杂 的 是 : 因为 
大 多 数 浏览 器 支持 CSS 布局 控制 的 z-index 属性 ， 所 以 你 不 能 使 用 @supports 
或 简单 的 JavaScript 检查 来 确定 它 是 否 支持 SVG 的 z-index。 


即使 有 这 样 可 运行 的 脚本 ， 你 也 无 法 取代 z-index 最 重要 的 好 处 : 将 DOM 
的 逻辑 组 织 结构 与 泻 染 顺序 分 离 。 你 的 标记 可 能 是 按照 逻辑 顺序 写 的， 但 
是 如 果 你 使 用 脚本 把 它 重 排 ， 乱 序 的 版 本 将 被 辅助 工具 (比如 屏幕 阅读 器 ) 
使 用 ， 或 在 复制 粘贴 文 本 时 使 用 。 

遗憾 的 是 ， 目 前 最 好 的 做 法 依然 是 按照 你 想 要 的 元 素 泻 染 顺 序 来 组 织 代码 。 
对 于 屏幕 阅读 器 ， 你 可 以 使 用 ARIA 属性 来 指定 逻辑 分 组 以 及 元 素 的 顺序 : 
用 aria-owns 来 创建 一 个 虚拟 的 父子 关系 ， 用 aria-flowto 来 定义 阅读 顺 
序 。 动 态 改变 交互 元 素 的 演 染 顺序 还 是 很 可 能 导致 用 户 输入 焦点 的 问题 。 


2 Sito = 

24 使 用 温 染 提示 属性 

样式 属性 的 最 后 一 课 有 助 于 你 控制 浏览 器 如 何 把 浑 染 数据 运用 在 图 形 上 。 
在 此 之 后 ， 本 书 的 其 他 部 分 将 重点 关注 你 在 这 些 形状 中 画 什 么 。 


这 些 最 后 的 属性 被 认为 是 你 (SVG 的 作者 ) 给 浏览 器 或 其 他 把 代码 转换 成 
有 色 像 素 的 软件 的 提示 。 当 浏览 器 必须 以 某 种 方式 牺牲 性 能 或 展现 时 ， 它 
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们 将 告诉 浏览 器 或 软件 哪个 属性 是 你 认为 最 重要 的 。 这 样 属性 或 多 或 少 会 
有 一 致 的 影响 。 
shape-rendering 
浏览 器 在 屏幕 分 状 率 的 限制 范围 内 应 该 如 何 调整 形状 的 边缘 。 它 有 四 个 
可 选 的 值 。 
e auto。 上 默认 值 。 这 告诉 浏览 器 选择 最 佳 的 优化 方式 。 
e optimizeSpeed。 这 告诉 浏览 器 快速 泻 染 是 最 重要 的 特性 (可 能 因为 图 
形 正 在 执行 动画 )， 图 形 的 边缘 可 能 不 会 被 精确 地 绘制 。 不 过 ， 细 微 
的 变化 可 能 因 浏 览 器 而 不 同 ， 但 大 部 分 情况 下 它 和 auto 的 效果 是 相 
同 的 。 
e crispEdges。 这 告诉 浏览 器 应 该 把 填充 和 描 边 区 域 边缘 的 对 比 度 最 大 
化 ， 这 通常 意味 着 边缘 会 在 最 近 的 像素 的 边界 形成 锯 类 ， 而 不 是 对 边 
缘 像素 部 分 着 色 (RBH). MPRA ACL, OBIE A 
利 清晰 的 图 像 ， 但 是 对 于 曲线 或 斜 线 ， 结 果 往 往 不 大 令 人 满意 。 
e geometricpPrecisiton。 这 告诉 训 览 器 应 该 尽 可 能 精确 地 绘制 形状 ， 如 
果 需 要 可 能 会 使 用 反 饮 齿 模 式 。 


(a eae 







































































图 2-7: shape-rendering 属性 在 一 条 描 边 很 细 的 路 径 上 的 效果 : crispEdges (E) 


和 geometricPrecision (F) 


2-7 对 比 了 crispEdges 和 geometricPrecision 属性 值 应 用 在 直线 和 曲 
线 上 的 效果 。 每 个 图 形 都 是 由 一 条 描 边 宽度 为 1 像素 的 路 径 组 成 的 。 值 为 
crispEdges 上 时， 直线 的 边缘 是 锐利 且 干 净利 落 的 ， 但 不 均匀 :由 于 线条 的 
精确 位 置 不 同 ， 导 致 描 边 的 宽度 在 一 个 或 两 个 全 屏幕 像素 上 下 浮动 (最 罕 
的 时 候 可 能 什么 都 没有 )， 曲 线 会 被 分 割 为 尖锐 的 一 小 段 一 小 段 。 相 比 之 
下 ， 使 用 geometricPrecision 绘制 的 时 候 ， 路 径 上 的 每 一 个 点 会 分 配 到 等 























量 的 颜色 ， 如 果 需 要 的 话 ， 颜 色 还 可 能 占据 多 个 设备 像素 来 进行 模糊 处 理 。 
text-rendering 
浏览 器 应 该 如 何 调 整 文本 中 字母 的 形状 以 及 位 置 。 它 也 有 四 个 可 选 值 。 


e auto (默认 值 )。 
。 optimizeSpeed, 在 大 多 数 浏 览 器 中 效果 和 auto 相同 。 对 于 较 大 的 文本 ， 
可 能 会 关闭 文本 布局 调整 (对 于 大 于 20 像素 的 文本 ，Firefox 默认 使 
用 易 读 性 调整 )。 
e optimizeLegibility， 这 告诉 浏览 器 应 该 尽 可 能 地 调整 单个 字母 的 泻 
染 以 及 文本 字符 串 的 布局 来 使 其 更 易于 阅读 。 实 践 中 ， 一 些 浏览 器 把 
它 当 作 扩 大 字母 间距 以 及 字体 文件 中 指定 的 不 必要 连 字 的 上 暗示。 
e geometricprecision， 这 告诉 浏览 器 应 该 把 字母 当 作 几 何 形 状 来 精确 
地 绘制 ， 而 不 会 根据 基于 分 辩 率 的 字体 提示 来 调整 。 
在 SVG 1.1 中 ,没有 明确 定义 text-rendering 的 确切 影响 。 它 不 是 一 致 地 
为 SVG 文本 而 实现 的 ， 但 是 该 属性 被 一 些 浏览 器 用 于 控制 韭 SVG 内 容 的 
字 距 和 连 字 。 
不 同 选项 值 的 确切 影响 可 能 在 未 来 的 规范 (SVG 2 或 CSS 模块 ) 中 加 以 说 
HH, font-variant-ligatures 和 font-kerning 等 属性 的 引入 应 该 有 助 于 从 
泻 染 质量 上 区 分 这 些 特 征 (虽然 使 用 optimizeSpeed 演 染 可 能 依然 会 导致 这 
些 设置 被 忽略 )。 图 2-8 显示 了 在 Windows 电脑 上 在 Firefox 39 中 给 常见 的 
系统 字体 设置 不 同 值 的 效果 ，optimizeSpeed 和 optimizeLegibility 的 效果 
看 起 来 一 样 ， 但 在 小 号 字体 中 明显 与 geometricprecision 演 染 的 结果 不 同 。 




































































Dptimized SVG Text Optimized SVG Text 
imid SVG Text Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 


Optimized SVG Text Optimized SVG Text 
Optimized SVGText Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 











2-8: 给 不 同 字号 的 Times New Roman (7) 40 Verdana-system fonts (4) 两 种 
字体 设置 text-rendering 属性 值 的 效果 。 从 上 到 下 依次 为 optimizeSpeed、 


optimizeLegibility, geometricPrecision 
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color-rendering 
浏览 器 在 计算 颜色 时 应 该 精确 到 什么 程度 ， 尤 其 在 使 用 混合 元 素 和 产生 
渐变 上 时。 标准 的 提示 关键 词 有 如 下 儿 个 选项 : 


e auto 











e optimizeSpeed 
。 optimizeQuality 


训 览 器 目前 不 会 响应 该 属性 设置 的 任何 行为 。 
image-rendering 


当 图 片 显 示 的 大 小 和 图 片 文件 本 身 定义 的 像素 大 小 不 完全 相同 时 ， 浏 
览 器 应 该 如 何 计 算 来 展现 光栅 图 片 。 在 SVG 1.1 中 ， 可 选 的 标准 值 有 
auto, optimizeSpeed 和 optimizeQuality。 然 而 在 实践 中 ， 很 明显 ， 对 
于 创建 一 个 “高 质量 ”缩放 图 片 的 方法 并 不 总 是 一 致 的 。 在 图 片 包含 尖 
锐 的 边缘 时 ， 处 理 相片 的 最 佳 算法 可 以 创建 毛 玻 璃 效果 。 


在 CSS Image Values and Replaced Content Module Level 3 中 已 经 接受 了 
image-rendering 属性 ， 但 废弃 了 optimizeSpeed 和 optimizeQuality 两 
个 属性 值 。optimizespeed 属性 被 一 个 像素 化 的 值 (每 一 个 像素 都 缩放 为 
一 个 正方 形 ) 替换 。 此 外 还 增加 了 crisp-edges 选项 ， 用 于 让 边缘 更 加 
平滑 并 维持 高 对 比 度 。 
在 编写 本 书 之 时 ， 推 荐 使 用 optimizeQuality Vee it thi A HR, 在 
现 有 的 浏览 器 中 它 被 默认 的 auto 值 履 盖 。 目 前 正在 讨论 设置 一 个 单独 的 
smooth 属性 ， 来 和 auto 属性 加 以 区 分 。 
一 组 不 同 但 有 关 的 属性 集 被 称 为 颜色 插值 指令 ， 我 们 将 在 第 3 章 中 深入 
讨论 。 颜 色 插 值 的 设置 不 (应 该 ) 是 建议 而 是 必要 的 。 但 是 ， 给 color- 
rendering 设置 optimizeSpeed 值 时 ， 如 果 它 减缓 了 泻 染 速度 ， 浏 览 器 可 以 
忽略 颜色 插值 模式 。 在 实践 中 ， 对 颜色 插值 选项 的 支持 程度 较 低 ， 导 致 这 
个 区 别 是 无 关 紧 要 的 。 
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创建 颜色 





本 章 我 们 将 更 加 深入 地 研究 使 用 纯色 来 填充 图 形 时 可 以 选用 的 值 有 哪些 。 首 
先 概述 颜色 在 Web 上 的 工作 原理 ， 然 后 描述 在 Web 上 定义 颜色 的 不 同方 式 : 
从 非常 可 读 (但 不 是 很 合理 ) 的 颜色 关键 词 ， 到 RGB 和 HSL 颜色 函数 。 

我 们 将 在 第 4 章 中 讨论 部 分 透明 颜色 ， 作 为 颜色 基础 知识 的 一 个 补充 。 颜 
色 的 概念 也 是 从 第 6 章 将 要 开始 介绍 的 颜色 渐变 的 一 个 必要 前 提 。 


3.1 ”使 用 名 称 生成 腾 肋 玫瑰 红 


当代 码 是 写 给 他 人 看 (例如 本 书 中 的 例子 ) 时 ,使 用 人 类 可 读 的 颜色 名 是 
非常 好 的 做 法 ， 比 如 red. gold 和 aquamarine 等 。 

如 果 计 算 机 也 可 以 识别 这 些 颜 色 名 那 就 再 好 不 过 了 。 值 得 高 兴 的 是 ， 在 
SVG 中 是 可 以 做 到 的 。Web 浏览 器 和 SVG 编辑 器 都 可 以 理解 red, gold 
和 aquamarine 的 含义 。 它 们 其 至 还 能 识别 更 加 稀奇 古怪 的 名 字 ， 比 如 
mistyRose, peachPuff 和 mediumSeaGreen。 

这 些 名 字 是 怎么 来 的 呢 ? 它们 有 两 个 来 源 : 在 早期 的 HTML 和 CSS 版 本 
中 引入 的 简单 的 颜色 关键 词 集 ， 以 及 从 Unix 电脑 X11 窗口 系统 中 的 SVG 
(以 及 后 来 的 CSS) 开始 使 用 的 更 广泛 的 关键 词 集 。' 两 种 关键 词 集 在 所 有 




































































注 1: 如 果 你 对 这 些 关键 词 如 何 最 终 成 为 X11 首要 标准 感 兴趣 ，Alex Sexton 从 以 前 的 Unix 
论坛 中 挖掘 了 相关 历史 。 你 可 以 在 线 观 看 他 在 2014 年 CSSConf 上 的 演讲 “Peachpuffs 
and Lemon Chiffons” (https://www.youtube.com/watch?v=HmStJQzclHc) 。 
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主流 的 SVG AAA PA. UES, EME AT DAZE ra EE Ta a F 
(最 古老 的 除外 ) 的 其 他 CSS 属性 中 使 用 。 

它们 对 于 用 户 是 友好 的 ， 但 关键 词 系 统 也 有 许多 限制 。 

首先 ， 这 147 个 关键 词 只 能 描述 现代 电脑 显示 器 可 以 显示 的 数 百 万 种 颜色 
中 的 一 小 部 分 。 

这 些 关键 词 的 选择 也 有 一 些 不 一 致 和 随意 的 情况 。 最 初 的 网 页 中 的 颜色 和 
X11 系统 中 的 颜色 有 时 是 冲突 的 。 颜 色 cyan (X11 中) F aqua (CSS 1 中 ) 
是 相同 的 ， 但 和 aquamarine 不 同 。 颜 色 darkGray (X11 F) 实际 上 比 gray 
(CSS 1 中 ) 还 浅 。 




















所 有 的 gray 关键 词 同样 也 可 以 拼写 为 grey。 这 是 一 个 特性 ， 
而 不 是 bug。 但 是 ， 一 些 老 的 浏览 器 只 支持 美式 拼写 方法 
gray， 所 以 建议 使 用 它 来 获得 更 好 的 支持 。 





X11 颜色 名 称 本 身 不 是 很 系统 ， 一 些 使 用 dark、medium 和 light 来 当 
前 级 ， 而 其 他 的 还 会 有 pale 前 级 。 这 些 变 形 不 总 是 符合 逻辑 的 ， 比 如 
darkSeaGreen 不 是 真 的 比 seaGreen, lightSeaGreen 和 mediumSeaGreen 颜色 
深 ， 而 仅仅 是 暗 一 点 。 


不 过 ， 如 果 你 很 享受 使 用 可 读 颜 色 名 称 带 来 的 便利 ， 所 有 可 以 识别 的 关键 
词 已 经 在 附录 A 中 列 出 ， 同 时 还 列 出 了 对 应 的 色 值 。 图 3-1 显示 了 颜色 按 
照 字 母 顺序 从 ALiceBule 到 yeLLowGreen 拼 起 来 的 图 片 。 


关键 词 的 名 称 和 大 多 数 CSS 关键 词 一 样 ， 是 不 区 分 大 小 写 的 。 如 果 你 觉得 
你 的 颜色 非常 强 ， 可 以 把 它们 全 部 大 写 。 大 部 分 官方 参考 文档 都 使 用 小 写 ， 
但 在 本 书 中 采用 驼峰 命名 法 (关键 词 首 字母 小 写 ， 后 续 每 个 单词 仅 首 字母 
大 写 ) 以 使 其 更 易于 阅读 。 

例 3-1 是 创建 图 3-1 效果 的 代码 。 它 使 用 XMLHttpRequest 来 加 载 一 个 单独 的 
文件 ,文件 内 容 是 按照 字母 顺序 排序 的 颜色 关键 词 列表 ， 然 后 创建 长 方形 
并 分 别 用 这 些 颜 色 填 充 。 每 个 长 方形 都 有 一 个 子 元 素 <title> 来 包含 颜色 名 
称 ， 如 果 你 在 浏览 器 中 运行 代码 ， 当 鼠标 在 色 块 上 甚 停 时 ， 它 会 像 工具 一 
样 给 你 提示 。 
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3-1: 所 有 可 以 用 颜色 关键 词 命名 的 颜色 
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例 3-1 创建 一 个 颜色 关键 词 拼图 
SVG 标记 : 


<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xLink" 
width="400px" height="650px" 
xml: Lang="en" 
viewBox="0 0 7 21" preserveAspectRatio="none" > (1) 
<title>SVG Color Keywords</title> 


<script><! [CDATA[ 
/* script goes here */ (2) 
]]> </script> 
</svg> 


O 在 SVG 规范 中 定义 了 147 个 关键 字 (包括 不 同 拼写 的 gray) ， 恰 好 可 以 
分 布 在 7x21 的 网 格 中 。viewBox 创建 了 一 个 7 列 21 行 的 网 格 ， 并 且 使 
用 preserveAspectRadio="none" 来 使 网 格拉 伸 到 填充 整个 <svg> 元 素 。 

O 整个 图 形 是 通过 脚本 绘制 的 。 由 于 这 是 一 个 SVG 文件 ， 所 以 需要 使 用 
XML 的 <!CDATA[...]]> 块 来 包含 脚本 中 的 一 些 特殊 字符 。 

JavaScript 代码 : 





(function(){ 
var svgNS = "http://www.w3.org/2000/svg"; 
var xLinkNS = "http://www.w3.org/1999/xLink"; 
var svg = document.documentElement; 


var dataFileURL = "color-names.csv" (1) 
var request = new XMLHttpRequest(); 
request.addEventListener("load", draw); 
request.overrideMimeType("text/csv"); 

request.open( "GET", dataFileURL); 

request.send(); 


function draw() { (2) 
var w = 7; //swatches per row 


var colors = request.responseText.split("\n"); © 


for (var i=0, n=colors.length; i<n; i++){ 
var c = colors[i].trim(); @ 


var swatch = document.createELementNS(svgNS, "rect"); 
swatch.setAttribute("width", 1); 
swatch.setAttribute("height", 1); 
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swatch.setAttribute("x", i %w ); 
swatch.setAttribute("y", Math.floor(i / w) ); O 


swatch.style.setProperty("fill", c); (6) 


var tip = document.createElementNS(svgNS, "title"); 
tip.textContent = c; 
swatch.insertBefore(tip, null); (7) 


svg.insertBefore(swatch, null); © 


} 
DOs 


@ XMLHttpRequest 对 象 用 于 加 载 包含 颜 色 名 称 列 表 的 文件 。 事 件 监 听 器 用 
于 在 文件 加 载 完 成 时 调用 我 们 的 绘画 国 数 。MIME 类 型 "text/csv" R 
明 我 们 期 望 的 是 一 个 分 隔 的 文本 文件 ， 这 样 浏 览 器 就 不 会 尝试 把 它 当 作 
XML 文件 来 解析 。 

O dran) 国 数 在 请 求 的 文件 下 载 完 成 时 调用 。 数 据 文件 中 每 一 个 关键 词 都 
是 单独 的 一 行 。 它 是 通过 在 电子 表格 中 插入 一 列 ， 然 后 保存 为 字符 分 隔 
值 (comma-separated values，CSV) 文件 创建 的 。 


© 请 求 的 responseText 属性 用 于 把 整个 文件 作为 一 个 单独 的 JavaScript 
字符 串 。spLit(token) 方法 根据 token 把 字符 串 拆 分 为 一 个 字符 串 数 
组 一 一 本 例 中 ， 换 行 符 在 JavaScript 转 为 \n。 


O 使 用 for 循环 遍历 数组 〈 即 数据 文件 中 的 每 一 行 ) 中 的 每 个 字符 串 。 
trin) 方法 用 于 去 掉 字符 串 两 端 多 余 的 空白 。 


O 在 拉 伸 的 SVG 坐标 系 中 每 一 个 长 方形 的 宽 和 高 都 设置 为 1， 水 平和 垂直 
的 位 置 是 通过 数组 索引 和 每 行 色 块 的 个 数 来 计算 的 。 


O 使 用 关键 词 名 称 来 给 Fi 属性 设置 值 。 


O 关键 词 还 被 用 作 <title> 元 素 的 文本 内 容 ， 之 后 把 它 添加 到 每 个 <rect> 
元 素 的 子 元 素 中 来 创建 提示 工具 。 


© 最 后 ， 设 置 了 样式 的 <rect> (以 及 它 的 提示 工具 ) 被 添加 到 SVG 中 。 
从 图 3-1 中 我 们 可 以 清晰 地 看 出 ， 颜 色 关键 词 并 不 是 所 有 可 能 颜色 的 一 个 代 
表 。 除 了 重复 的 灰色 ， 还 有 许多 灰白 色 的 颜色 ， 以 及 相对 较 少 的 瞳 色调 。 
显然 ， 我 们 有 比 这 147 个 关键 词 更 多 的 可 选 值 。 想 要 完全 了 解 自 定义 颜色 
的 原理 ， 我 们 首先 要 了 解 一 点 物理 学 和 一 点 生物 学 。 
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3.2 彩虹 三 原色 


在 物理 学 中 ， 颜 色 是 表示 波 的 频率 或 者 光 的 能 级 的 一 个 属性 。 可 见 光 本 身 
是 由 更 宽 的 电磁 波谱 内 的 一 段 特定 范围 的 频率 组 成 的 。 能 量 较 低 时 ， 电 磁 
辐射 就 形成 了 无 线 电 波 ， 而 能 量 较 高 时 ， 它 就 变 成 了 X 射线 。 

光谱 是 连续 的 ， 颜 色 之 间 并 没有 明确 的 界限 ， 刚 好 是 一 条 平 谓 过 渡 的 彩虹 ， 
包含 从 红色 到 楼 色 、 黄 色 、 绿 色 、 蓝 色 、 紫 色 ， 再 到 我 们 肉眼 看 不 到 的 紫 
外 线 。 每 一 种 颜色 都 和 特定 频率 和 能 级 相关 联 。 


正如 你 可 以 调节 收音 机 的 频率 使 它 对 某 一 无 线 电 频率 敏感 一 样 ， 有 色 颜 料 
对 特定 频率 的 光 十 分 敏感 。 它 们 吸收 特定 频率 (颜色 ) 光 的 能 量 并 反射 其 
他 的 区。 同样 ， 化 学 反应 中 产生 光 是 因为 反应 释放 的 能 量 达 到 了 特定 的 频 
率 。 热 光源 还 可 以 被 调节 来 调整 颜色 。 如 果 火 焰 燃 烧 反 应 的 效率 随 不 同 燃 
料 和 氧气 水 平 不 断 增 长 ， 光 子 (每 单位 光 ) 的 能 量 也 随 之 增加 ， 并 且 颜 色 
会 从 暗 红 〈 像 烧 红 的 煤 一 样 ) 变 为 黄色 ， 最 后 变 为 明亮 的 蓝 色 (就 像 图 3-2 
显示 的 煤气 燃烧 一 样 )。 
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图 3-2: 煤气 燃烧 产生 的 蓝 色 火焰 (公共 领域 的 图 片 由 维基 共享 资源 用 户 Sapp 提供 ) 


无 线 电 台 的 频率 会 混合 ， 而 光 的 频率 不 会 。 每 个 光子 都 保持 着 它 自己 的 能 
级 和 颜色 。 你 可 以 通过 棱镜 或 者 细 雾 来 把 太阳 光 的 多 种 颜色 折射 为 彩虹 。 
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那么 为 什么 平常 我 们 看 到 的 太阳 光 是 白色 而 不 是 彩色 的 呢 ? 这 就 不 得 不 提 
到 生物 学 。 


你 的 眼睛 对 一 定 范 围 内 的 电磁 波谱 〈 我 们 称 为 可 见 光 的 部 分 ) 是 敏感 的 ， 
这 是 因为 色素 分 子 吸收 光 的 能 量 并 在 大 脑 中 将 其 转换 成 化 学 信号 。 大 多 数 
人 眼中 有 四 种 感光 色素 : 一 种 非常 敏感 但 不 是 特定 颜色 的 色素 (负责 夜 视 
和 一 些 运动 检测 )， 以 及 三 种 颜色 色素 。 每 种 颜色 色素 对 光谱 中 不 同 但 重生 
的 区 域 敏感 。 


因此 ， 我 们 的 眼睛 不 是 依据 所 有 可 能 频率 的 连续 光谱 来 识别 颜色 的 ， 而 是 
只 看 三 种 颜色 色素 分 别 吸收 了 多 少 光 ， 你 的 大 脑 会 把 这 些 信 息 转化 为 你 能 
看 到 的 所 有 颜色 。 

我 们 眼中 的 色素 通常 和 蓝 色 、 绿 色 和 红色 相关 ， 可 以 简单 描述 为 : 绿色 和 
红色 色素 同样 对 蓝光 敏感 ， 三 种 色素 都 对 中 绿色 的 光敏 感 。 另 一 种 命名 系 
统 把 它们 描述 为 S (短波 长 )、M (中 等 波长 ) 以 及 工 〈 长 波长 )， 这 是 因为 
光 的 频率 通常 由 光 的 波长 来 决定 。 

因为 光 具 有 国定 的 波 速 ， 所 以 频率 〈 每 秒 的 波 数 ) 和 波长 

( 相 邻 波 之 间 的 距离 ) 可 以 互 换 。 光 的 能 量 越 高 ， 它 的 频率 
越 快 ， 波 长 越 短 。 












































由 于 眼睛 看 到 的 颜色 是 三 种 色素 不 同 值 的 混合 ， 如 果 不 从 物理 学 角度 来 看 ， 
我 们 可 以 在 绘画 中 混合 颜色 。 图 3-3 概述 了 混合 颜色 的 原理 。 如 果 你 眼睛 看 
到 的 是 纯 黄色 的 光 ， 那 么 M 和 L 色素 同等 程度 地 被 触发 ， 而 S 色素 没有 被 
触发 。 你 的 大 脑 根据 这 些 信息 在 脑 中 构建 出 黄色 。 


如 果 你 的 眼睛 在 相同 位 置 上 看 到 的 是 亮 绿 色 和 亮 红 色 的 光 的 混合 物 ， 同 样 
的 色素 就 会 被 激活 ， 你 的 大 脑 仍 然 认为 看 到 的 是 黄色 。 


几乎 每 一 种 使 用 颜色 来 传递 信息 的 设备 ， 包 括 打印 机 和 屏幕 ， 都 利用 了 颜 
色 混 合 。 然 而 ， 打 印 机 和 屏幕 涉及 的 颜色 会 有 不 同 。 


印刷 颜料 ， 就 好 像 我 们 眼中 的 色素 一 样 ， 吸 收 特定 频率 的 光 。 当 有 色 的 墨 
水 或 涂料 吸收 部 分 照射 在 它 上 面 的 光 时 ， 它 会 从 反射 到 你 眼睛 中 的 颜色 中 
消除 它 吸 收 的 那 部 分 光 的 频率 。 当 与 其 他 颜色 混合 时 ， 其 他 颜色 吸收 的 光 
会 被 消除 。 这 被 称 为 减 色 混合 ， 也 是 你 在 幼儿 园 就 学 到 的 颜色 混合 。 黄 
色 颜 料 会 吸收 大 部 分 蓝 紫 光 ， 反 射 绿色 、 黄 色 和 红色 ， 蓝 色 颜 料 将 会 吸收 
红色 。 混 合 黄色 和 蓝 色 ， 结 果 会 吸收 红色 和 蓝 色 ， 反 射 你 所 看 到 的 绿色 。 
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图 3-3: 三 色 系统 是 如 何 欺骗 我 们 的 大 脑 的 〈 图 标 由 用 户 jhnri4、pnx 和 benoitpetit 
剪 切 自 openclipart.org) 


也 许 从 幼儿 园 开 始 你 就 记得 混合 深 色 的 颜料 会 造成 一 片 混乱 。 dpe 
印 机 会 使 用 明亮 的 颜料 ， 它 反射 的 光 会 多 于 吸收 的 光 : 青色 ( 蓝 绿色 )、 

红 〈 反 射 蓝 色 和 红色 ) 和 黄色 (反射 红色 和 绿色 )。 混 合 这 三 re 所 
有 颜色 的 光 都 会 被 吸收 ， 这 就 形成 了 墨 黑 色 ， 其 实 打 印 机 通常 会 包含 一 个 
单独 的 浓 黑 色 。 打 印 高 品质 的 图 形 会 使 用 一 i Ga mae 
Yellow 以 及 blacK) 颜色 模型 ， 它 会 使 用 四 种 墨 来 生成 每 种 颜色 。 


相 比 之 下 ， 电 脑 屏幕 会 直接 把 光照 射 到 我 们 的 眼中 。 多 种 颜色 组 合 来 增加 
进入 你 眼中 的 光 的 总 量 。 因 此 它 被 称 为 加 色 模 型 。 彩 色 显示 器 (就 像 更 早 
的 彩色 电视 一 样 ) 使 用 红色 、 绿 色 和 蓝 色 频率 的 光 来 使 你 眼中 色素 的 差异 
最 大 化 。 精 心 排列 的 红色 、 绿 色 和 蓝 色 的 光 组 成 的 每 个 像素 都 被 变换 来 在 
你 眼中 重 现 几乎 所 有 鲜 活 的 图 案 ， 就 像 自然 光 那 样 。 
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HP PR HR PAS AS Te 2,3 ht HP SE BO PE Tm], A 
些 颜 色 〈 某 种 饱和 度 的 绿色 ， 特 别 强 的 蓝 色 和 深 红 色 ) 无 法 
使 用 RGB 光 来 准确 地 表达 。 同 样 ， 彩 色 打印 方式 永远 不 能 
完全 重 现 某 些 自然 颜色 。 可 以 被 一 种 颜色 系统 表示 的 所 有 可 
能 颜色 的 范围 被 称 为 该 颜色 系统 的 色 域 。 


























数字 图 形 系 统 中 一 个 像素 里 的 每 种 颜色 的 亮度 水 平 都 有 一 个 固定 的 数值 。 
早期 的 彩色 电脑 中 ， 每 种 颜色 有 四 个 等 级 ， 一 共 包 括 64 (4x4x4) 种 颜 
色 。HTML 中 最 早 使 用 的 “网 络 安全 ”颜色 关键 词 列表 可 以 被 映射 到 64 色 
显示 器 中 。 然 而 ， 大 多 数 现代 电脑 可 以 支持 每 种 颜色 256 个 级 别 (0~255), 
超过 1600 万 种 组 合 。 这 是 在 Web 中 使 用 颜色 编码 的 基础 。 


3.3” 自 定义 颜色 
TE CSS 和 SVG 中 使 用 一 组 RGB 值 来 自 定义 颜色 有 两 种 方式 : 


函数 表示 法 ， 格 式 为 rgb(red,green,blue) 
。 十 六 进 制 表示 法 ， 格 式 为 #RRGGBB 或 #RGB 
在 函数 表示 法 中 使 用 的 值 可 以 是 0 到 255 的 整数 或 者 百分比 。 但 不 可 以 混 
合 使 用 整数 和 百分比 ， 所 有 的 值 必须 使 用 同一 种 类 型 。 
六 位 的 十 六 进 制 格式 的 值 同样 使 用 0~255 的 数字 ,但 是 必须 要 转换 成 十 六 
进 制 的 数值 。 十 六 进 制 中 ， 每 一 位 数字 可 以 表示 0 到 15 的 数值 ， 而 不 仅仅 
是 0 到 9 (hexa 是 6，deci 是 10， 所 以 十 六 进 制 是 基于 16 的 数字 系统 )。 额 
外 的 数字 通过 字母 A (10) 到 F (15) RER. 
三 位 的 十 六 进 制 格式 是 颜色 中 每 个 值 的 两 个 十 六 进 制 数字 相同 时 的 简写 。 














十 六 进 制 在 CSS 和 SVG 中 是 不 区 分 大 小 写 的 ，#ACE 和 #ace 
是 相同 的 〈 代 表 淡 蓝 色 ， 也 可 以 写成 #AACCEE)。 





如 下 的 颜色 定义 指定 了 相同 的 RGB 值 : 
rgb(102,51,153) 
rbg(40%,20%,60%) 

。 #663399 

。 #639 
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在 一 些 最 新 的 浏览 器 中 ， 你 还 可 以 使 用 关键 词 RebeccaPurple 
来 表示 颜色 值 #39。 将 该 名 称 添 加 于 CSS Color Module 
Level 4 中 ， 是 为 了 纪念 非常 喜欢 紫色 的 Rebecca Meyer， 她 
去 世 于 六 岁 生 日 那天 。 她 的 父亲 Eric Meyer 是 W3C CSS 工 
作 组 前 成 员 ， 并 出 版 了 很 多 有 关 CSS 的 图 书 。 它 是 SVG 1 
规范 发 布 后 添加 的 唯一 一 个 颜色 关键 词 。 





CSS Color Module Level 3 中 介绍 了 另 一 种 描述 颜色 的 方式 ， 它 基于 更 加 常见 
的 颜色 理论 而 不 是 RGB 电脑 显示 器 。 色 相 - 饱和 度 - 亮度 (hue-saturation- 
lightness, HSL) 模型 把 颜色 描述 为 “ 纯 ” 色 和 黑色 、 白 色 或 灰色 的 混合 方 
式 。 它 的 三 个 具体 值 如 下 。 
色相 
使 用 色 轮 中 的 角度 定义 的 纯色 ， 角 度 为 0 度 时 是 纯 红 色 ，60 度 时 是 纯 黄 
色 ，120 度 时 是 亮 绿 色 ，300 度 时 是 品 红色 ，360 度 时 又 回 到 了 纯 红色 。 


饱和 度 
混合 色 中 纯色 的 强度 (用 于 调整 亮度 )，0% 的 饱和 度 会 有 灰色 的 色 度 ， 
100% 的 饱和 度 是 鲜亮 的 颜色 。 

亮度 
混合 色 中 黑色 或 者 白色 的 程度 ，0% 的 亮度 是 纯 黑 色 ，1009% 的 亮度 是 纯 
AE, m 50% 的 亮度 是 最 鲜艳 的 颜色 。 


与 RGB 值 不 同 ，HSL 值 通常 不 唯一 ， 不 同 的 HSL 值 可 能 组 合 出 相同 的 颜 
色 。 例 如 饱和 度 为 0% 时 ， 不 论 色 相 值 如 何 ， 永 远 显 示 灰 色 。 亮 度 为 100% 
时 ， 不 论 色 相 和 饱和 度 值 如 何 ， 永 远 显 示 白 色 。 


其 他 两 种 颜色 模型 容易 与 HSL 混淆 : 色相 - 饱和 度 - 明度 
(hue-saturation-value, HSV) 模型 和 色相 -饱和 度 -亮度 
(hue-saturation-luminance， 不 巧 ， 它 也 缩写 为 HSL) 模型 。 
色相 和 饱和 度 的 定义 是 相同 的 ， 但 第 三 个 参数 的 值 是 不 可 互 
换 的 。 如 果 你 想 匹 配 其 他 绘图 软件 中 定义 的 颜色 ， 要 确保 你 
们 使 用 的 是 相同 的 颜色 模型 。 














图 3-4 使 用 环形 色 轮 来 展现 色相 角度 和 颜色 之 间 的 关系 ， 不 同 的 半径 显示 的 
是 不 同 的 亮度 ， 每 个 单独 的 色 轮 有 着 不 同 的 饱和 度 。 
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s = 100% 











图 3-4: 色相 - 饱和 度 - 亮度 (HSL) 颜色 模型 ， 色 相 的 值 从 0 度 往 右 按 顺 时 针 方 
向 逐渐 增加 ， 亮 度 水 平 从 内 往外 分 别 为 25%、50% 和 75%; 饱和 度 的 值 如 
图 中 所 示 

最 鲜亮 的 颜色 是 在 饱和 度 为 100%、 亮 度 为 50% 的 时 候 创建 的 。 在 RGB 模 

型 中 ， 这 些 颜色 至 少 有 一 个 颜色 通道 为 100%， 一 个 颜色 通道 为 0%。 通 党 

来 说 ， 把 RGB 转换 为 HSL 时 : 


。 饱和 度 的 值 可 以 计算 为 100% 减 去 最 小 RGB 通道 占 最 大 RGB 通道 的 百 
分 比 


S = (1 - min/max) x 100% 
。 亮度 的 值 是 最 大 颜色 通道 百分比 和 最 小 颜色 通道 百分比 的 平均 值 : 
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L = (min% + max%)/2 


色相 的 值 是 由 中 间 值 与 最 大 颜色 通道 的 值 减 去 最 小 通道 的 值 的 比例 决定 


H= 60+60x([G-B]/[R-nmin])， 如 果 最 大 值 是 R 
H = 120 + 60 x ([B-R]/[G-min])， 如 果 最 大 值 是 6 


H = 240 + 60 x ([R-G]/[B-min])， 如 果 最 大 值 是 B 


该 分 数 返 回 一 个 介 于 -1 到 1 之 间 的 值 ， 这 取决 于 哪 种 颜色 的 值 最 小 ， 哪 种 
颜色 的 值 会 增加 或 减少 相对 于 主 色 通道 为 纯色 相 时 的 色相 值 。 如 果 为 红 紫 
色 ， 第 一 个 公式 会 返回 一 个 负 的 色相 和 角度， 我 们 可 以 通过 给 它 加 360 度 来 
转换 为 等 效 的 正 值 。 


当 两 个 颜色 通道 捆绑 在 一 起 (你 可 以 任意 选择 一 个 为 最 大 值 或 最 小 值 ) 的 
时 候 ， 转 换 公 式 仍 然 适用 。 但 是 当 颜 色 为 灰色 时 ， 色 相 的 值 为 undefined; 
颜色 为 黑色 时 ， 饱 和 度 的 值 为 undefined。undefined 值 会 被 设置 为 0。 


在 CSS 中 使 用 HSL 值 定 义 颜 色 时 ， 要 使 用 hsL(h,s%,1%) 国 数 。 色 相 的 值 
理论 上 是 一 个 角度 ， 但 是 我 们 在 设置 值 的 时 候 不 需要 单位 。 饱 和 度 和 亮度 
通常 用 百分数 来 表示 。 一 些 例子 如 下 : 
RBE (lime), rbg 值 为 (0%, 100%, 0%), hsl 值 为 (120, 100%, 50%) 
绿色 (green), rbg 值 为 (0%, 50%, 0%), hsl 值 为 (120, 100%, 25%) 
紫色 (purple), rbg 值 为 (50%, 0%, 50%), hsl 值 为 (300, 100%, 25%) 
RebeccaPurple &, rbg {4-4 (40%, 20%, 60%), hsl 值 为 (270, 50%, 40%) 


虽然 hsL() 颜色 函数 在 所 有 现代 浏览 器 中 都 支持 〈IE8 是 唯 
一 一 个 不 支持 的 常用 浏览 器 )， 但 是 一 些 编辑 、 显 示 或 者 转 
换 SVG 的 工具 可 能 不 支持 。 对 CSS3 部 分 透明 颜色 的 支持 度 
与 此 类 似 ， 我们 将 在 第 4 章 进行 讨论 。 



































例 3-2 是 创建 图 3-4 的 SVG 和 JavaScript 代码 。 它 为 每 个 彩色 的 扇形 部 分 创 
建 了 <use> 元 素 ， 并 且 使 用 style 对 象 来 给 hsl() 函数 填 值 。 每 一 块 都 是 把 
色相 值 作为 rotate() 变换 函数 的 参数 旋转 形成 的 。 


例 3-2 使 用 SVG 和 脚本 创建 一 个 HSL 色 轮 
SVG 标记 ; 


<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
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width="400px" height="400px" viewBox="0 0 200 200" > 
<title>HSL Color Wheel</title> 
<defs> (1) 
<circle id="center" r="1.5" fill="black"/> 
<path id="inner" transform="rotate(-15)" 
d="M0,0L15,0A15,15 0 © 1 12.99,7.5 LO,0Z" /> (2) 
<path id="middle" transform="rotate(-15)" 
d="M15,0L28,0A28,28 © 0 1 24.25,14 
L12.99,7.5 A15,15 © © 0 15,02" /> 
<path id="outer" transform="rotate(-15)" 
d="M28,0L40,0A40,40 0 © 1 34.64,20 
L24.25,14 A28,28 0 © 0 28,0Z" /> 
<circle id="edge" r="39" fill="none" 
stroke="white" stroke-width="2"/> 
</defs> 
<style type="text/css"> 
text { 
text-anchor: middle; 
font-size: 8px; 
font-family: sans-serif; 
} 
</style> 
<rect fill="#888" width="100%" height="100%" /> © 
<svg class="wheel" width="100" height="100" x="0" y="0" 
viewBox="-40,-40 80,80"> @ 
<use xlink:href="#center"/> 
<use xlink:href="#edge"/> O 
</svg> 
<svg class="wheel" width="100" height="100" x 
viewBox="-40,-40 80,80"> 
<use xlink:href="#center"/> 
<use xlink:href="#edge" /> 
</svg> 
<svg Class="wheel" width="100" height="100" x 
viewBox="-40,-40 80,80"> 
<use xlink:href="#center"/> 
<use xlink:href="#edge" /> 
</svg> 
<svg class="wheel" width="100" height="100" x="0" y="100" 
viewBox="-40,-40 80,80"> 
<use xlink:href="#center"/> 
<use xlink:href="#edge"/> 
</svg> 
<script><! [CDATA[ 
/* script goes here */ 
]]> </script> 
</svg> 


"100" y="0" 


"190" y="0" 








O 所 有 的 形状 都 预定 义 以 方便 多 次 使 用 。 它 们 被 居中 绘制 在 一 个 80 x 80 的 





坐标 系 中 ， 


每 一 个 完整 的 轮子 是 一 个 半径 为 40 的 圆 。 


O 模 形 部 分 使 用 path 标记 以 及 一 点 三 角形 学 来 创建 。 每 一 个 模 形 是 一 个 30 
度 的 部 分 ， 以 x 轴 为 中 心 。 为 了 减少 对 三 角形 学 的 依赖 ， 定 义 模 形 时 首 
先 让 它 的 一 条 边 与 x 轴 平行 ， 然 后 逆 时 针 旋转 ， 直 到 它 的 中 心 落 在 x 轴 








上 。 这 样 ， 每 个 圆 弧 的 一 个 终点 的 (wy) 坐标 可 以 定义 为 (0)， 其 中 了 为 
圆 的 半径 。 另 一 个 终点 的 坐标 可 以 表示 为 (rxX cos(30° ), rx sin(30° )), 它 
相当 于 (r x 0.866, r x 0.5)。 


© 使 用 以 50% 的 灰色 (#888) 填充 的 长 方形 给 图 片 提供 背景 。 

O 每 一 个 色 轮 都 使 用 一 个 <svg> 元 素来 定义 ， 它 的 位 置 在 图 片 内 部 ， 并 且 
使 用 viewBox 属性 来 确保 它 以 坐标 系 的 原点 为 中 心 、 大 小 为 80 x 80。 

O 每 一 个 <svg> 都 包含 一 个 黑色 的 中 心 点 以 及 轮子 白色 的 边缘 ， 它 们 都 不 
需要 任何 特殊 的 计算 。 


JavaScript: 








(function(){ 


var 
var 


var 
var 
var 


var 


var 
for 


} 
HNO; 


svgNS = "http://www.w3.org/2000/svg"; 
xLinkNS = "http: //www.w3.org/1999/xLink"; 


wedge = 30; //angle span of each pie piece, in degrees 
saturation = ["100%", "75%", "50%", "25%" ]; 
lightness = {outer:"75%", middle:"50%", inner:"25%"}; 


Q@e 


wheels = document.getELementsByCLlassName("wheel"); © 
h,s,l,w,p,u; 
(var i=0, n=wheels.length; i<n; i++){ 
w = wheels[i]; 
s = saturation[i]; @ 
for (h=0; h < 360; h += wedge ) { 

for (p in lightness){ © 
l = lightness[p]; 
u = document.createELementNS(svgNS, "use" ); 
u.setAttributeNS(xlinkNS, "href", "#"+p ); 
u.setAttribute("transform", "rotate("+h+")" ); O 
u.style.setProperty("fill", "hsl("+[h,s,l]+")" ); Q 
w.insertBefore(u, w.firstChild); (8) 

© 


} 
var t = document.createElementNS(svgNS, "text" ); 
t.textContent = "s = "+s; 


t.setAttribute("y", "35"); 
w.insertBefore(t, null); 
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@ 每 个 色 轮 对 应 的 饱和 度 的 值 存储 在 一 个 数组 中 ， 随 时 准备 好 分 配给 每 个 
单独 的 <svg> 元 素 。 由 于 我 们 不 需要 对 这 些 值 进行 数学 计算 ， 所 以 可 以 
把 它们 存 为 带 有 % 的 字符 串 。 

O 我 们 使 用 存储 键 值 对 的 对 象 来 保存 不 同 模 形 部 分 的 id 以 及 对 应 的 亮度 的 
值 ， 而 不 是 使 用 两 个 单独 的 数组 。 


© 通过 类 名 选中 磐 套 的 <svg> 元 素 。 


O 在 for 循环 的 每 个 周期 内 通过 索引 来 获取 每 个 <svg> 以 及 对 应 的 饱和 度 
值 。 然 后 嵌 套 使 用 一 个 for 循环 来 循环 色相 的 值 ， 每 一 次 循环 给 每 个 要 
形 增加 30 度 。 


O 最 后 ， 另 一 种 类 型 的 for 循环 用 于 遍历 Lightness 对 象 中 的 数据 键 。 
p 变量 在 每 次 循环 中 被 设置 为 键 字符 串 (例如 ，"outer"、"middle" 
和 "inner")。 键 可 以 用 于 从 对 象 中 获取 对 应 的 值 ， 也 可 以 直接 设 为 
xlink:href 属性 的 值 。 


O 色相 值 用 于 旋转 模 形 。 由 于 色 轮 使 用 的 是 中 心 坐标 系 ， 所 以 可 以 简单 地 
绕 着 轮子 的 中 心 旋转 。transforn 属性 的 值 是 转换 函数 rotate(h) 组 成 的 
一 个 字符 串 ， 圆 括号 是 字符 串 的 一 部 分 ， 而 不 是 JavaScript 的 函数 的 一 
部 分 。 

O 内 联 样式 属性 fill 通过 一 个 包含 CSS hstL() 函数 的 JavaScript 字符 串 来 
创建 ， 同 样 它 也 包括 圆 括号 。 通 过 把 一 组 值 放 到 一 个 数组 来 创建 逗号 分 
隔 的 参数 列表 ， 当 一 个 数组 与 字符 串 连 接 时 ， 最 终 会 等 效 地 输出 数组 中 
的 每 个 值 并 用 逗号 隔 开 。 

O 之 后 ， 椒 块 被 插入 为 <svg> 的 第 一 个 子 元 素 ， 所 以 它 会 被 绘制 到 黑色 中 
心 点 以 及 白色 边缘 之 下 。 


O 最 后 的 代码 块 在 每 个 <svg> 中 都 只 会 运行 一 次 ， 并 创建 一 个 文本 标签 。 
它们 被 插入 到 所 有 其 他 元 素 的 后 面 (nothing 或 null 之 前 ) ， 所 以 文本 会 
显示 在 色 轮 的 最 上 面 。 


引入 HSL 颜色 函数 是 为 了 更 易于 创建 配套 的 颜色 : 色相 值 相 同 但 亮度 或 饱 
和 度 值 不 同 ， 或 亮度 和 饱和 度 值 相同 但 色相 值 不 同 。 选 择 HSL 模型 的 另 一 
个 原因 是 浏览 器 可 以 在 HSL 和 了 RGB 值 之 间 快 速 转换 ， 当然 它 也 有 自己 的 
局 限 性 。 色 相 色 轮 在 作为 子 元 素 混 合演 染 的 时 候 ， 与 我 们 知道 的 红 一 黄 - 
蓝 色 轮 不 太 相 符 。 更 重要 的 是 ， 亮 度 模 型 不 能 反映 出 同样 强烈 但 色相 值 不 
同 的 颜色 之 间 明 亮 程度 的 区 别 。 













































































以 上 原因 以 及 计算 机 硬件 的 历史 导致 一 些 优化 成 为 了 所 有 图 形 处 理 器 的 标 
准 ， 渐 变 和 混 色 使 用 的 是 更 加 复杂 的 颜色 模型 。 


3.4 混合 和 搭配 

眼睛 对 光 的 敏感 度 并 不 直接 和 电脑 显示 器 上 像素 的 亮度 相对 应 。 相 比 于 白 
色 与 浅 灰 色 之 间 的 变化 ， 你 更 容易 察觉 黑色 和 深 灰 色 之 间 的 变化 。 对 于 颜 
色 ， 完 全 饱和 的 蓝光 看 起 来 比 相同 强度 的 红 光 更 瞳 ， 并 且 两 者 都 不 像 全 亮 
度 的 绿 光 那 样 明亮 (从 大 脑 反 应 的 角度 来 说 )。 

因此 ， 混 合 等 量 的 红色 和 蓝 色 (或 蓝 色 和 绿色 ) 的 光 不 会 创建 出 我 们 大 脑 
认为 的 两 者 中 间 的 一 个 颜色 。 这 同样 适用 于 几乎 所 有 其 他 颜色 的 组 合 ， 以 
及 灰 度 梯度 。 

电脑 显示 器 ， 尤 其 是 Web 刚刚 流行 时 人 们 所 使 用 的 CRT 显示 器 ， 会 使 每 一 
种 颜色 值 的 真实 亮度 失真 。 标 准 不 统一 导致 同样 的 颜色 在 不 同 的 显示 器 上 
看 起 来 有 很 大 不 同 。 

当 在 计算 机 图 形 中 混合 颜色 时 ， 大 多 数 现代 电脑 显示 器 使 用 的 是 SRGB (有 
时 被 称 为 标准 RGB) 模型 。 它 定义 了 把 RGB 显示 的 颜色 转换 为 标准 的 、 
在 SRGB 兼容 的 电脑 显示 器 上 可 以 察觉 到 亮度 差异 的 方法 。 

SROB 的 使 用 主要 影响 颜色 的 混合 。 图 3-5 对 比 了 使 用 sRGB 模型 来 混合 颜 
色 或 灰 度 梯度 的 结果 与 基于 简单 的 线性 算法 来 计算 中 间 颜 色 (每 一 对 中 下 
方 的 渐变 ) 的 结果 。 

SRGB 模型 针对 用 于 显示 图 片 的 设备 类 型 及 其 亮度 做 了 很 多 假设 。 另 外 ， 人 
与 人 在 颜色 感知 上 不 尽 相同 ， 更 不 用 说 存在 色 宦 (眼中 缺少 一 种 或 多 种 感光 
ER) 等 因素 。 也 许 你 并 不 认为 SRGB 模型 比 线性 模型 好 ， 更 别 说 认为 它 是 
最 好 的 混合 方式 。 但 是 它 已 经 成 为 计算 机 图 形 的 标准 ， 尤 其 是 在 Web E. 


sRGB 模型 以 及 一 般 的 RGB 色彩 空间 在 图 像 打 印 领 域 并 不 
受 欢 迎 ， 因 为 它们 不 能 编码 高 质量 打印 机 所 能 创建 的 所 有 
颜色 。SVG 规范 声明 了 为 确保 高 保 真 的 颜色 印刷 结果 而 使 
用 其 他 颜色 定义 的 方式 。 这 些 颜色 定义 使 用 国际 色彩 联盟 
(International Color Consortium, ICC) 定义 的 颜色 配置 文件 。 
ICC 由 各 大 数字 图 像 公 司 联合 创建 ， 它 的 SVG 颜色 配置 在 
Web 浏览 器 中 并 没有 实现 。 
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图 3-5: 用 sRGB 色彩 空间 混合 颜色 (每 一 对 中 上 方 的 渐变 ) 与 线性 RGB 混合 (每 
一 对 中 下 方 的 渐变 ) 的 对 比 ， 包 括 针对 完全 饱和 的 颜色 以 及 灰 度 的 比较 


CSS 以 及 大 部 分 SVG 默认 使 用 的 都 是 SRGB 模型 。SVG 规范 定义 了 color- 
interpolation 属性 ， 它 允许 使 用 者 切换 到 更 简单 的 数学 线性 混合 颜色 模式 
(LinearRGB 模式 )。 当 图 形 由 许多 高 亮度 、 高 饱和 度 、 色 相差 别 很 明显 的 颜 
色 组 成 时 ， 这 可 能 是 更 好 的 选择 。sRGB 模型 在 混合 差异 明显 的 明亮 颜色 
时 ， 会 在 生成 一 种 介 于 两 种 颜色 之 间 的 令 人 不 快 的 暗色 ， 如 图 3-5 中 第 一 部 
分 所 示 。 


























编写 本 书 时 ， 所 有 主流 Web 浏览 器 都 不 支持 LinearRGB 颜色 
混合 。 图 3-5 是 使 用 Apache Batik SVG 查看 器 生成 的 。 即 使 
是 Batik 也 仅仅 支持 线性 渐变 混合 ， 而 不 支持 分 层 颜 色 以 及 
部 分 透明 颜色 的 混合 。 
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sRGB 被 广泛 应 用 ， 但 滤 镜 计算 是 一 个 例外 。SVG 滤 镜 允许 你 直接 操作 
RGB 颜色 通道 ， 并 且 默 认 使 用 LinearRGB 来 计算 。 将 color-interpolation- 
filters 属性 值 设 置 为 sRGB 会 获得 更 好 的 浏览 器 支持 ， 从 而 在 滤 镜 中 启用 
sRGB, 


以 上 两 种 颜色 插值 模式 选项 都 是 样式 属性 ， 我 们 可 以 在 单个 元 素 或 整个 
SVG 中 使 用 表现 属性 或 CSS 规则 来 设置 。 渐 变 和 滤 镜 所 使 用 的 属性 来 自 渐 
变 或 滤 镜 的 元 素 ， 而 不 是 当前 正在 被 演 染 的 元 素 。 


对 于 不 同 颜色 的 相对 亮度 ， 某 些 滤 镜 操作 和 SVG 遮 四 使 用 的 是 它们 自己 的 
修正 方式 。 这 些 修正 都 是 基于 颜色 本 身 的 亮度 (luminance)。 亮 度 用 于 度 
量 明亮 程度 ， 它 不 同 于 ASL 颜色 国 数 所 使 用 的 亮度 (lightness) 值 。 相 反 ， 
前 者 是 基于 这 样 一 个 事实 : 完全 饱和 的 绿色 和 黄色 在 感知 上 比 完全 饱和 的 
红色 更 加 明亮 ， 而 完全 饱和 的 红色 比 完全 饱和 的 蓝 色 更 加 明亮 。 


在 一 些 浏览 器 中 ， 遮 置 从 颜色 到 亮度 的 转换 会 受到 color- 
interpolation 属性 的 影响 ， 因 此 默认 情况 下 它 与 基于 亮度 的 
滤 镜 不 同 。 














这 些 工具 所 使 用 的 亮度 调整 和 sRGB 调整 具有 相似 的 作用 ， 但 不 完全 等 
价 。sRGB 影响 灰色 或 具有 不 同 亮度 (lightness) 值 的 颜色 的 等 级 ， 而 亮度 
(luminance) 的 权重 只 会 影响 色相 的 不 同 。 此 外 ， 后 者 给 每 种 颜色 通道 都 创 
建 了 一 个 线性 的 等 级 ， 而 sRGB 定义 了 颜色 值 和 感知 亮度 之 间 的 曲线 〈 伽 
马 调 整 ) 关系 。 


所 有 这 些 对 你 有 什么 影响 呢 ? 大 多 数 情况 下 ， 它 仅仅 是 对 你 的 一 个 提醒 。 

如 果 你 在 脚本 中 计算 颜色 ,或 者 使 用 滤 镜 操作 颜色 ， 要 知道 简单 地 求 R、 

G、B 的 算术 平均 值 会 创建 一 个 与 浏览 器 混合 渐变 或 结合 部 分 透明 的 颜色 不 
同 的 结果 。 同 样 ， 使 用 滤 镜 改变 色相 (亮度 调整 ， 有 时 也 可 能 是 sRGB 调 
整 ) 与 直接 在 hsL() 颜色 函数 中 改变 色相 的 值 也 会 有 不 同 的 结果 。” 

本 章 的 内 容 大 多 都 是 理论 知识 。 我 们 在 后 面 讲 解 透明 度 〈 第 4 章 ) 和 渐变 

(第 6~9 章 ) 的 时 候 ， 将 会 看 到 颜色 混合 的 效果 。 








注 2: 感谢 Noah Blon 让 我 注意 到 hst() 颜色 函数 与 改变 色相 角度 的 滤 镜 操作 之 间 的 差异 。 
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第 4 章 


透明 





纯色 在 图 形 绘 制 中 确实 占有 一 席 之 地 ， 但 是 对 于 许多 图 形 ， 你 可 能 想 增 加 
一 点 微妙 的 变化 。 添 加 透明 就 是 其 中 的 一 种 方式 ， 它 允许 你 演 染 一 个 不 完 
全 遮挡 下 面 内 容 的 图 层 。 

从 某 种 意义 上 说 ， 透 明 是 颜色 的 另 一 面 ， 也 是 一 个 独特 且 更 加 复杂 的 话题 。 
这 体现 在 定义 透明 度 的 不 同方 式 上 。 本 章 将 对 比 这 些 方式 。 

当 我 们 谈 到 透明 度 和 网 页 设计 时 ， 有 一 点 是 不 变 的 : 我 们 不 探讨 透明 度 ， 
而 是 讨论 不 透明 度 。 这 两 个 概念 是 完全 相反 的 : 当 一 种 事物 完全 不 透明 时 ， 
它 的 透明 度 为 0; 当 一 种 事物 的 不 透明 度 为 0 时 ， 它 完全 透明 且 不 可 见 。 


ma 1 ` > 
4.1 穿 透 样式 
SVG 使 用 三 个 不 同 的 属性 来 控制 基础 形状 和 文本 的 不 透明 度 : opacity, 
fill-opacity 以 及 stroke-opacity。 我 们 可 以 通过 表现 属性 或 CSS 样式 规 
则 来 给 它们 设置 值 。 
CSS Color Module Level 3 扩展 了 了 opacity 属性 ， 使 它 可 以 应 用 到 所 有 内 容 
上 。 此 外 ， 它 没有 为 CSS te 42H) — AISI A *-opacity 属性 ， 而 是 引入 了 
新 的 颜色 函数 。 部 分 透明 颜色 可 以 使 用 rgba() 和 hsla() 颜色 函数 来 定义 ， 
它们 可 以 用 在 CSS 中 所 有 要 使 用 颜色 值 的 地 方 。 


Web 中 的 不 透明 度 通常 使 用 一 个 介 于 0.0 (不 可 见 ) 和 1.0 (纯色 ,不 透明 ) 
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之 间 的 小 数 来 表示 。 当 不 透明 度 是 颜色 或 图 像 的 固有 组 成 部 分 时 ， 这 些 数 
字 也 被 称 为 alpha 值 。rgba() 和 hsla() 中 的 a 指 的 都 是 alpha 通道 。 这 两 个 
国 数 都 接收 四 个 参数 ， 而 不 是 通常 使 用 的 三 个 ， 第 四 个 参数 是 0 到 1 之 间 
的 alpha 值 。 


以 前 在 CSS 背景 中 有 特殊 含义 的 关键 词 transparent, WE 
新 定义 为 一 个 命名 颜色 。 它 的 值 等 于 rbga(0,0,0,0)， 它 可 以 
像 其 他 颜色 关键 词 一 样 ， 在 支持 CSS3 颜色 的 浏览 器 中 使 用 。 























修改 图 形 alpha 值 的 最 终 效 果 取 决 于 你 使 用 的 方法 。 具 体 说 来 ， 整 体 
opacity 属性 与 其 他 属性 的 工作 方式 明显 不 同 。 

opacity 属性 应 用 在 设置 它 的 元 素 上 一 一 即使 是 <g> 组 、<svg> 或 者 <use> 
元 素 并 且 它 不 会 被 继承 。 最 终 绘制 的 效果 同样 会 作用 在 元 素 所 有 的 子 
内 容 上 ， 这 使 得 整个 元 素 更 加 均匀 透明 。 
































opacity 的 值 在 确定 两 个 重合 形状 或 同一 形状 填充 和 描 边 的 
重合 部 分 中 每 一 点 的 最 终 颜 色 之 后 添加 。 











设置 opacity 的 值 小 于 1 会 创建 一 个 层 芭 上下文， 它 所 有 的 子 内 容 都 会 被 压 
入 栈 中 。 在 CSS 布局 中 ， 这 可 能 会 明显 影响 元 素 的 位 置 。SVG 1.1 中 没有 
类 似 的 效果 ,但 在 SVG 2 中 它 将 会 影响 z-index 形成 的 栈 ， 并 把 所 有 的 3D 
变换 元 素 压 入 栈 中 。 


与 之 不 同 的 是 ， 当 你 设置 stroke-opacity 或 fill-opacity， 再 使 用 rgba 
BM hsla 颜色 国 数 时 ， 透 明 效 果 在 每 个 形状 绘制 时 只 作用 在 有 颜色 的 部 分 。 
stroke-opacity 和 fill-opacity 两 个 属性 默认 情况 下 都 可 以 被 继承 。 


图 4-1 展示 了 一 个 使 用 粗 的 绿色 描 边 和 黄色 填充 来 描绘 的 “8” 与 一 个 蓝 紫 
色 、 透 明度 不 变 的 椭圆 形 部 分 重合 后 的 不 同 效 果 。 黄 绿色 形状 分 别 为 完全 
不 透明 (左上 )， 以 及 通过 stroke-opacity 和 fill-opacity 属性 (EE). 
在 <use> 元 素 上 添加 opacity 属性 (左下 )、 用 rgba 颜色 值 绘 制 描 边 和 填充 
(AP) 三 种 方式 设置 半 透 明 效 果 。 例 4-1 给 出 了 代码 。 
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4-1; 一 个 黄 绿色 的 形状 在 完全 不 透明 和 三 种 设置 部 分 透明 的 方式 下 的 效果 
例 4-1 使 用 不 同 的 不 透明 方式 来 控制 图 形 的 透明 度 


<svg xmLns="http://www.w3.org/2000/Ssvg" 
xmLns:XxLink="http://www.w3.org/1999/xLink" 
width="400px" height="400px" viewBox="0 0 200 200" 
xmL: Lang="en"> 
<title>Opacity Adjustments</title> 
<defs> 
<ellipse id="background" 
ry="15" rx="35" transform="rotate(20)" 
stroke="purple" fill="LightSkyBlue" 
stroke-width="5" /> 
<path id="foreground" stroke-width="10" 
d="M0,0C0,-60 60,0 0,0 S 0,60 0,0Z" /> (2) 


© 


</defs> 
<style type="text/css"> 
svg svg { 
overflow: visible; 
} 


text { 
text-anchor: middle; 





46 | $42 


font-size: 7px; 
font-family: sans-serif; © 
} 
</style> 
<rect fill="#888" width="100%" height="100%" /> 
<svg width="100" height="100" x="0" y="0" 
viewBox="-40,-45 80,80"> @ 
<use xlink:href="#background"/> 
<use xlink:href="#foreground" 
fill="yellow" stroke="green" /> (5) 
<text y="-35">solid</text> 
</svg> 
<svg width="100" height="100" x="100" y="0" 
viewBox="-40,-45 80,80"> 
<use Xlink: href="#background"/> 
<use xlink:href="#foreground" 
fill="yellow" stroke="green" 
fill-opacity="0.5" stroke-opacity="0.5" /> @ 
<text y="-35" dy="-0.3em"> stroke-opacity="0.5" 
<tspan x="0" dy="1lem">fill-opacity="0.5"</tspan> 
</text> 
</svg> 
<svg width="100" height="100" x="0" y="100" 
viewBox="-40,-45 80,80"> 
<use xlink:href="#background" /> 
<use xlink:href="#foreground" 
fill="yellow" stroke="green" opacity="0.5" /> @ 
<text y="-35">opacity="0.5"</text> 
</svg> 
<svg width="100" height="100" x="100" y="100" 
viewBox="-40,-45 80,80"> 
<use xlink:href="#background" /> 
<use xlink:href="#foreground" 
fill="rgba(100%, 100%, 0%, 0.5)" 
stroke="rgba(0%, 50%, 0%, 0.5)" /> 
<text y="-35">rgba(r,g,b,0.5) colors</text> 
</svg> 
</svg> 


O <defs> 部 分 预先 定义 了 重复 使 用 的 形状 。 作 为 背景 的 椭圆 上 ， 所 有 的 泻 
染 属 性 都 是 通过 表现 属性 来 设置 的 。 

© 前 景 <path> 指定 了 stroke-width， 它 的 绘制 样式 将 会 通过 其 他 方式 继承 。 

© CSS <style> 块 用 于 设置 文本 标签 的 样式 以 及 防止 峰 套 的 <svg> 元 素 被 裁 
BY, (EER 7px 的 font-size 将 在 局 部 坐标 系 中 解析 ， 所 以 不 会 产生 异常 
小 的 情况 。 
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O EDAREN <svg> 在 主要 图 像 的 不 同 象限 中 重复 创建 了 相同 的 局 部 坐标 
系 ， 所 以 复 用 的 图 形 可 以 使 用 相同 的 方式 定位 。 

O 背景 元 素 在 每 个 样本 中 都 复 用 一 次 ， 并 且 把 前 景 元 素 层 倒 在 它 的 上 面 。 
在 第 一 个 例子 中 ， 给 前 景 元 素 设 置 了 纯色 的 填充 和 描 边 。 


O 接 下 来 的 <svg> 元 素 定 位 在 图 像 的 其 他 象限 中 ， 并 且 给 前 景 <use> 元 素 

设置 不 同 的 表现 属性 。 
O 对 于 opacity 的 设置 ， 它 们 将 作为 一 个 结合 的 组 直接 作用 在 <use> 元 素 

上 ， 而 不 是 继承 到 复 用 图 形 上 。 
图 4-1 还 展示 了 我 们 在 第 2 章 讨论 的 一 些 概念 。 描 边 以 每 个 形状 的 边缘 为 
中 心 。 当 描 边 为 部 分 透明 时 (由 于 使 用 stroke-opacity 或 rgba 闫 色 函 数 )， 
描 边 的 内 半 部 分 的 填充 就 会 可 见 ， 这 会 创建 一 个 双色 效果 。 
另 一 个 需要 注意 的 特点 是 ， 描 边 的 重 琶 部 分 并 没有 添加 不 同 的 色调 ， 描 边 
区 域 只 会 绘制 一 次 。 从 概念 上 讲 ， 我 们 往往 认为 描 边 是 使 用 马克 笔 或 笔 刷 
沿 着 线 的 外 部 绘制 的 。 如 果 确 实 是 这 样 的 话 ， 那 些 描 边 两 次 的 区 域 将 会 有 
两 倍 强度 的 颜色 ， 就 像 你 使 用 半 透 明 的 水 彩 颜料 ， 在 相同 的 区 域 刷 两 次 那 
样 。 然 而 ， 计 算 机 是 先 计算 出 描 边 总 区 域 ， 然后 再 均匀 着 色 ， 就 像 它 是 从 
一 块 半 透 明 的 塑料 上 裁剪 下 来 的 一 样 。 
控制 不 透明 度 的 方式 有 多 种 ， 那 么 把 它们 结合 起 来 使 用 会 产生 什么 样 的 效 
果 呢 ?最 终 效果 会 合 加 。 例 如 ， 下 面 的 圆通 过 两 种 不 同 的 方式 添加 部 分 透 
明 的 填充 效果 : 

<circle r="10" fill="hsla(240,100%,75%, 0.5)" 
fill-opacity="0.6"> 
















































































它 的 效果 与 以 下 代码 完全 相同 ， 因 为 0.5 x 0.6=0.3: 


<circle r="10" fill="hsl(240,100%, 75%)" 
fill-opacity="0.3"> 


它 得 到 的 不 透明 度 更 加 复杂 ， 因 为 透明 度 是 在 合并 其 他 颜色 之 后 应 用 的 。 
尽管 如 此 ， 在 其 他 属性 导致 的 不 透明 度 级 别 改变 之 后 ，0.5 的 不 透明 度 属 性 
值 依然 会 导致 形状 中 每 个 像素 的 alpha 值 减 半 〈 乘 以 0.5). 

由 于 opacity 属性 只 是 对 每 个 像素 的 值 进行 简单 的 数学 上 的 调整 ， 使 用 大 多 
数 显 卡 的 GPU 来 实现 会 很 高 效 。 不 透明 度 的 改变 往往 会 使 动画 更 加 平 请 ， 
尽管 不 是 所 有 的 浏览 器 都 为 SVG 内 容 采 用 这 一 点 。 











部 分 透明 颜色 fill-opacity 和 stroke-opacity 不 会 进行 同样 的 优化 ， 因 为 
它们 都 仅仅 影响 元 素 的 一 部 分 。 但 是 ， 如 果 你 不 是 动态 改变 不 透明 度 的 值 ， 
这 些 属性 可 能 会 更 高 效 ， 因 为 它们 不 会 强制 创建 层 登 上 下 文 。 


4.2 ”其 他 效果 


正如 3.4 节 中 所 提 及 的 那样 ， 部 分 不 透明 对 象 创建 的 颜色 是 基于 sRGB 模型 
计算 的 。 根 据 该 规范 ， 它 应 该 会 受到 color-interpolation 模式 的 影响 ， 但 
大 多 数 查 看 SVG 的 软件 都 默认 使 用 sRGB 并 且 仅 仅 支 持 这 一 种 模式 。 


多 层 重合 显示 的 最 终 颜 色 需 要 经 过 以 下 儿 个 步 又: 首先 依据 sRGB 模型 对 
两 种 颜色 进行 缩放 ， 然 后 获取 背景 和 前 景 (alpha 值 是 前 景 的 一 个 权重 ) 的 
加 权 平 均值 ， 最 后 反 转 sRGB 缩放 。 该 计算 不 会 在 意 背 景 颜色 是 单一 元 素 
创建 的 还 是 与 部 分 透明 元 素 混 合 创建 的 。 

这 种 混合 颜色 的 方法 被 称 为 简单 alpha 合成 。 在 许多 图 形 程序 中 ， 它 也 被 称 


Ay “normal” RATEN. 

















简单 alpha 混合 之 外 
许多 图 形 程序 定义 了 另 一 种 控制 两 个 不 同 层 或 对 象 的 颜色 如 何 结合 在 一 起 
的 混合 模式 。 
在 SVG 1.1 中， 有 多 种 混合 模式 可 供 选择 ， 但 是 只 能 在 滤 镜 中 使 用 。W3C 
创建 的 新 Compositing and Blending Specification 中 将 CSS 以 及 HIML5 
canvas 使 用 的 混合 模式 的 定义 标准 化 。 它 还 介绍 了 两 个 可 以 应 用 到 SVG 上 
的 新 CSS 属性 : mix-blend-mode 和 isolation, 


元 素 上 的 mix-blend-mode 属性 用 来 控制 元 素 如 何 与 它 后 面 的 颜色 混合 。 
一 共有 16 种 不 同 的 模式 (包括 默认 的 normaL)， 分 别 定 义 了 组 合 元 素 的 
RGBA 或 HSLA 值 与 混合 背景 内 容 对 应 的 值 的 计算 方式 。 


组 元 素 或 <use> 元 素 上 的 isolation 属性 用 于 限制 混合 作用 的 范围 。 隔 离 元 
素 在 子 内 容 互 相 混 合 之 后 ， 再 使 用 自己 的 混合 模式 来 把 子 内 容 的 混合 结果 
与 背景 相 融 合 。 你 可 以 使 用 isotLation:isotate 来 显 式 地 隔离 一 个 元 素 ， 但 
有 一 些 其 他 的 CSS 属性 也 可 能 导致 司 离 ， 比 如 设置 opacity 的 值 大 于 1， 使 
FERRE, AMARA LES AE normal 的 混合 模式 ， 或 者 使 用 3D 转换 。 
HTML F HEH <svg> 元 素 默 认 会 被 隔离 。 





HERP, RORA ARH 4 Firefox, Chrome, Opera 和 Safari 中 得 到 
了 支持 。 但 下 中 和 许多 移动 浏览 器 还 不 支持 ， 微 软 的 Edge 浏览 器 正 考虑 
加 以 支持 。 


使 用 简单 的 alpha 混合 创建 的 颜色 直接 对 应 于 背景 色 和 纯色 对 象 之 间 进 行 
sRGB 渐变 产生 的 颜色 。alpha 值 决 定 了 沿 渐变 方向 偏 移 的 距离 。 如 果 alpha 
的 值 为 0， 则 该 对 象 完 全 透明 ， 渐 变 的 初始 值 是 背景 色 。 如 果 alpha 的 值 为 
0.5， 使 用 的 是 渐变 的 中 点 的 颜色 。 如 果 alpha 值 为 1 (对 象 完 全 不 透明 )， 
显示 的 颜色 与 渐变 的 终点 颜色 (前景 对 象 本 身 的 颜色 ) 相同 。 

图 4-2 中 ， 上 方 是 红色 (#F90) 到 蓝 色 (#60F) 的 光滑 渐变 ， 下方 是 在 纯 红 
色 的 长 方形 之 上 放置 一 个 蓝 色 正方 形 ， 且 逐次 改变 正方 形 的 fill-opacity 
的 值 。 图 4-2 展示 了 两 者 的 对 比 效果 。 


你 可 能 觉得 似乎 图 4-2 中 的 正方 形 也 是 使 用 渐变 填充 ， 且 渐 
变 方向 相反 。 这 是 一 种 公认 的 光学 错觉 。 你 的 眼睛 和 大 脑 会 
加 强 每 条 边 上 颜色 之 间 的 对 比 。 当 一 个 纯色 元 素 在 它 的 每 一 
侧 都 有 不 同 的 对 照 颜色 (或 一 侧 有 渐变 )， 对 比 度 的 增强 会 
让 我 们 在 感知 上 以 为 是 渐变 。 

为 了 证 明 你 看 到 的 确实 是 纯色 ,使 用 几 张 纸 ( 纸 的 颜色 都 相 


同 ) 覆盖 与 正方 形 相 邻 的 部 分 ， 直 到 你 能 看 到 一 个 单独 的 纯 
色 方 块 。 





























B 4-2: 使 用 渐变 和 不 透明 度 混合 颜色 的 对 比 ; 正方 形 由 蓝 色 正方 形 和 位 于 其 下 部 
的 纯 红色 长 方形 组 成 , 蓝 色 正 方形 的 fiLL-opacity 值 分 别 为 0、0.25、0.5、 
0.75, 1 
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例 4-2 是 生成 图 4-2 的 代码 。 
例 4-2 使 用 不 透明 度 搭配 渐变 来 创建 混合 闫 色 


<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xlink" 
width="400px" height="200px" viewBox="0 0 400 200" 
xml: Lang="en"> 
<title>Blending with opacity and gradients</title> 
<defs> 
<LlinearGradient id="gradient"> 
<stop offset="0" stop-color="#F00"/> 
<stop offset="1" stop-color="#00F"/> 
</linearGradient> 
<rect id="square" width="100" height="100" y="100"/> 
</defs> 











<rect fill="url(#gradient)" width="400" height="100"/> 

<rect fill="#F00" width="400" height="100" y="100"/> 

<g fill="#00F"> 
<use xlink:href="#square" x="-50" fill-opacity="0" /> 
<use xlink:href="#square" x="50" fill-opacity="0.25" /> 
<use xlink:href="#square" x="150" fill-opacity="0.5" /> 
<use xlink:href="#square" x="250" fill-opacity="0.75" /> 
<use xlink:href="#square" x="350" fill-opacity="1" /> 

</g> 

</svg> 


在 第 6 章 中 我 们 将 会 介绍 图 4-2 中 使 用 的 <linearGradient> 和 <stop> 元 素 ， 
并 且 介 绍 如 何 利 用 它们 创建 不 同 的 渐变 效果 。 但 首先 ， 第 5 章 中 我 们 将 探 
bt SVG 中 使 用 URL 引用 另 一 个 元 素来 填充 当前 元 素 会 产生 的 结果 。 








透明 | 51 


第 5 章 


ERRI 





当 Fill 或 stroke 的 值 比 单一 颜色 更 加 复杂 时 (transparent 或 者 其 他 )， 
SVG 使 用 一 种 叫 作 演 染 服务 的 概念 来 描述 图 形 是 如 何 被 泻 染 的 。 

演 染 服务 通过 自身 特定 的 SVG 元 素来 定义 。 这 些 元 素 (渐变 和 图 案 ) 不 会 
直接 创建 一 个 可 见 图 形 。 它 们 仅仅 用 于 形状 或 文本 的 fill 和 stroke 属性 
中 。 然 而 ， 通 过 使 用 XML 标记 来 定义 演 染 服务 ， 它 可 以 有 无 数 种 变化 任 
何 SVG 图 形 都 可 以 用 于 生成 SVG 图 案 ， 包 括 其 他 图 案 本 身 。 

相 比 之 下 ， 当 使 用 CSS 来 给 HTML 内 容 添 加 样式 时 ， 所 有 关于 如 何 绘制 元 
素 的 信息 都 必须 包含 在 CSS 样式 规则 内 。 在 CSS 2.1 中 ， 创 建 图 案 的 唯 
方式 是 引用 外 部 图 片 文件 。 在 此 之 后 ，CSS 已 经 推出 许多 以 前 只 能 在 SVG 
中 实现 的 图 形 效果 ， 比 如 渐变 以 及 改变 图 片 位 置 。 尽 管 最 终 的 结果 可 能 

起 来 很 相似 ， 但 这 些 属性 的 CSS 语法 和 等 价 的 SVG 有 很 多 不 同 之 处 。 在 
本 书 的 其 余部 分 ， 我 们 将 会 在 “CSS 与 SVG” 附注 栏 中 对 这 两 种 方式 加 以 
比较 。 
本 章 介 绍 了 基本 的 泻 染 服 务 模型 ， 并 介绍 如 何 使 用 它 来 提供 单一 泻 染 颜色 。 


5.1 泻 染 和 壁纸 


所 有 SVG 演 染 服务 的 一 个 主要 特点 是 它们 生成 的 图 形 内 容 都 在 长 方形 区 域 
内 。 有 时 这 可 能 会 有 些 限制 ,但 也 会 有 一 些 潜 在 的 性 能 优化 机 会 。 
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墙 面 。 形 状 本 身 作为 遮 或 者 模子 来 限制 真实 绘制 的 部 分 ， 正 如 粉刷 匠 在 
粉刷 墙壁 时 会 庶 住 地板、 天 花 板 、 灯 具 等 ， 最 终 被 粉刷 的 只 有 墙 辟 。 

理解 演 染 服务 〈 尤 其 是 次 论 渐变 和 图 案 时 ) 的 另 一 种 方式 是 把 浑 染 内 容 想 
象 成 一 大 张 墙纸 。 形 状 是 从 大 块 墙纸 中 裁剪 出 来 的 部 分 ， 如 图 5-1 所 示 。 


























er" =. 
~a 














5-1: 可 以 想象 填充 的 形状 是 从 矩形 图 案 中 裁剪 出 来 的 


当然 ， 计 算 机 不 会 使 用 纸 和 剪刀 ， 而 是 把 形状 作为 栅 格 形状 〈 横 向 扫描 )。 
填充 区 域内 的 每 一 个 点 时 ， 计 算 机 都 会 从 泻 染 服 务 中 查找 对 应 的 (x, y) 坐标 。 
所 以 ， 演 染 服务 可 以 是 能 够 给 每 一 个 (x, y) 值 都 分 配 特 定 颜色 的 任意 对 象 。 
理论 上 说 ,“ 泻 染 ” 可 以 是 任何 事物 : 一 种 单独 的 颜色 、 一 个 或 多 个 渐变 、 
重复 的 图 案 、 位 图 、 文 本 ， 甚 至 是 其 他 SVG 文件。 实际 上 ，SVG 1.1 有 两 
种 类 型 的 泻 染 服务 ， 渐变 和 重复 图 案 。 然 而 ， 这 些 核心 元 素 可 以 创建 上 述 
所 有 选项 ， 本 书 的 其 余部 分 将 会 对 此 进行 说 明 。 


5.2 标识 资源 


“服务 ”意味 着 它 是 多 个 资源 的 外 部 引用 。 理 论 上 说 ， 你 可 以 单独 创建 一 个 
文件 来 包含 你 所 有 的 泻 染 服务 ， 并且 在 fill 和 stroke 属性 中 引用 它 ， 但 是 
目前 浏览 器 支持 比较 差 。 通 常情 况 下 ， 演 染 服 务 指 的 是 每 一 个 渐变 或 图 案 
对 象 可 以 给 多 个 SVG 形状 提供 泻 染 (渲染 指令 )。 












































在 本 书 编写 之 时 ， 外 部 浑 染 服务 仅仅 在 Firefox 和 使 用 Presto 
泻 染 引擎 的 pre-Blink 版 本 的 Opera 中 得 到 了 支持 。 


为 了 使 用 泻 染 服 务 ， 你 需要 使 用 URL 语法 来 引用 泻 染 服务 元 素 ， 并 把 它 放 
在 CSS 的 urL() 函数 内 。 由 于 浏览 器 支持 程度 的 限制 ， 这 个 URL 几乎 总 是 
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一 个 内 部 引用 ， 就 像 urL(#myReference) 这 样 。 井 号 (#) 表示 接 下 来 是 一 
个 指向 特定 元 素 的 标记 ， 事 实 上 井 号 之 前 没有 任何 东西 表示 浏览 器 应 该 在 
当前 文档 中 查找 该 元 素 。 具 体 而 言 ， 它 寻找 的 是 一 个 id 属性 与 标记 片段 相 
匹配 的 元 素 (BN <pattern id="myReference">)。 

因此 ， 引 用 一 个 ID 为 “customBlue” 的 演 染 服务 作为 填充 值 如 下 所 示 : 


<rect fill="url(#customBlue)" width="100" height="100"/> 

















因为 fill 是 一 个 表现 属性 ， 所 以 你 还 可 以 在 文档 中 任意 位 置 使 用 一 个 
<style> 块 来 设置 值 : 


rect { 
fill: url(#customBlue) ; 





ETA ASRS SS Be SCS EY BE AB EARS, HUGE ARE 
` 会 被 更 加 具体 的 CSS 规则 覆盖 。 


外 部 样式 表 中 的 相对 URL 通常 指向 CSS 文件 的 位 置 ， 而 不 是 使 用 这 些 样式 
的 文档 的 位 置 。 这 包括 像 #customBlue 这 样 的 本 地 URL 片段 ， 如 果 它 定义 在 
外 部 CSS 文件 中 ， 则 永远 不 会 匹配 任何 东西 。 再 加 上 对 外 部 渲染 服务 的 支持 
度 比 较 差 ， 这 很 不 幸 地 意味 着 你 不 能 有 效 利用 外 部 样式 表 来 设置 谊 染 服 务 。 


























相对 URL 也 会 受到 xmL:base 属性 或 HTML<base> 元 素 的 影 
响 ， 这 两 者 都 会 导致 演 染 服务 引用 失败 。 


理论 上 (或 者 你 仅仅 需要 支持 Firefox)， 如 果 你 有 一 组 预先 定义 在 名 为 
brand.svg 的 文件 中 的 颜色 ， 你 可 以 提供 一 个 引用 该 资源 的 相对 路 径 ， 然 后 
使 用 标记 片段 来 指向 特定 元 素 : 
<rect fill="url(brand.svg#customBlue)" 
width="100" height="100"/> 
或 者 你 甚至 可 以 提供 一 个 绝对 URL 指向 同一 个 资源 ， 假 设 外 部 文件 可 以 在 
你 的 Web 域 下 安全 访问 : 


<rect fill="url(//example.com/assets/brand.svg#customBlue)" 
width="100" height="100" /> 


不 幸 的 是 ， 对 该 选项 的 支持 程度 很 差 ， 因 为 服务 的 概念 可 以 被 看 作 另 一 种 
资源 库 ， 一 种 存储 常用 颜色 、 渐 变 、 图 案 、 遮 界 以 及 其 他 资源 的 单个 文件 。 
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现在 ， 如 果 你 有 在 多 个 SVG 中 共用 的 泻 染 服务 ， 你 需要 直接 把 它们 添加 在 
每 个 文档 中 ， 要 么 在 你 的 服务 上 使 用 一 些 预 处 理 ， 要 么 使 用 Ajax 技术 来 通 
过 客户 端 JavaScript 导入 。 

因为 很 多 东西 可 能 会 对 外 部 资源 的 加 载 产 生 干 扰 ， 其 至 浏览 器 本 身 不 支持 ， 
所 以 SVG 的 fill 和 stroke 属性 允许 你 定义 一 个 备用 的 颜色 值 。 该 色 值 在 
url() 引用 之 后 设置 ， 通 过 空白 来 分 隔 ， 如 下 所 示 : 


rect { 
fill: url(brandColors.svg#customBlue) mediumBlue; 

















也 可 以 使 用 表现 属性 和 十 六 进 制 颜色 语法 : 


<rect fill="url(brandColors.svg#customBlue) #0000CD" 
width="100" height="100"/> 


AOR S AANER ARE INK, ARIES HE AE SAS ee, 


分 层 填 充 与 降级 方案 


SVG 2 中 引入 了 分 层 填充 和 分 层 描 边 ， 类 似 于 CSS 盒 布局 的 分 层 背 景 图 片 。 
使 用 多 个 背景 图 片 时 ， 多 个 洽 染 选项 使 用 从 上 到 下 用 过 号 分 隔 的 列表 来 定 
义 。 在 列表 的 最 后 可 以 添加 一 个 备用 的 颜色 ， 用 空白 与 前 面 的 内 容 分 隔 开 。 
不 同 于 CSS 中 的 简写 方式 background (设置 background-image 列表 和 单个 
background-color 值 ) ， 最 后 的 颜色 通常 不 会 在 其 他 泻 染 层 之 下 绘制 。 
例子 如 下 所 示 : 


.typeA { 
fill: url(#pattern1), url(#gradient) mediumBlue; 
} 


.typeB { 
fill: url(#pattern2), url(#gradient) darkSeaGreen; 
} 


PRERA AT VAsE Ao HK, typed 和 typeB 两 个 图 形 将 会 根据 相同 的 渐变 
层 上 不 同 的 图 案 层 来 区 分 。 如 果 没 有 找到 泻 染 服 务 (也 许 你 的 Ajax 脚本 没 
有 正确 执行 )， 两 个 图 形 将 会 使 用 不 同 的 纯色 来 绘制 。 

如 果 你 确实 想 要 在 图 案 或 渐变 层 之 下 绘制 纯色 ， 可 以 使 用 去 号 来 与 前 面 的 
层级 分 隔 : 





.typeA { 
fill: url(#pattern), mediumBlue; 
} 


.typeB { 
fill: url(#pattern), darkSeaGreen; 
} 


本 例 中 ， 两 个 图 形 的 类 使 用 了 相同 的 图 案 (可 能 添加 一 个 纹理 效果 )， 但 是 
它们 布局 在 不 同 的 纯色 之 上 。 


5.3 纯色 渐变 


很 多 时 候 ， 尤 其 是 在 商业 产品 中 使 用 颜色 时 ， 设 计 师 将 会 给 颜色 取 一 个 特 
定 的 名 称 。 同 样 的 颜色 可 能 会 在 许多 与 品牌 相关 的 图 形 中 出 现 ， 例 如 公司 
logo 的 不 同 版 本 、 标 题 文 字 、 产 品 标签 等 。 我 们 可 以 把 每 种 颜色 都 只 定义 
一 次 ， 并 分 别 给 它们 分 配 一 个 名 称 ， 然 后 就 可 以 在 内 容 中 直接 使 用 该 名 称 ， 
而 不 用 维护 它们 的 RGB 值 组 成 的 列表 。 这 也 使 得 在 设计 过 程 中 改变 某 一 颜 
色 变 得 更 加 容易 。 
SVG 谊 染 服务 非常 适合 去 做 这 项 工作 。 我 们 可 以 在 多 个 图 形 的 ftLL 和 
stroke 属性 中 引用 它 的 D ， 而 真实 的 颜色 值 只 需要 指定 一 次 且 很 容易 更 新 
(可 以 通过 这 种 方式 引用 动画 ， 我 们 将 在 第 14 ENA). 

最 初 的 SVG 规范 没有 明确 包含 纯色 泻 染 服务 ， 但 是 所 有 的 浏览 器 都 允许 你 
使 用 单个 不 变 的 颜色 组 成 的 渐变 来 实现 这 种 效果 。 例 S-1 展示 了 这 一 方式 ， 
它 使 用 <LinearGradient> 元 素 给 在 (虚构 的 ) ACME 公司 的 商标 中 使 用 的 
四 种 颜色 命名 。 这 些 颜 色 最 终 被 用 于 绘制 公司 logo， 如 图 5-2 所 示 。 















































5-2: 使 用 命名 颜色 的 ACME logo 
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例 5-1 使 用 单 色 渐变 来 给 商标 定义 命名 的 颜色 
<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
xml: Lang="en" 


width="100mm" height="50mm"> (1) 
<title>ACME Logo</title> 
<defs> 
<linearGradient id="AcmeRed"> (2) 
<stop stop-color="#FF4022" /> 
</linearGradient> 


<linearGradient id="AcmeMaroon"> 
<stop stop-color="#80201C" /> 
</linearGradient> 
<linearGradient id="AcmeGold"> 
<stop stop-color="#FFFC32" /> 
</linearGradient> 
<linearGradient id="AcmeWhiteGold"> 
<stop stop-color="#FFFCE0" /> 
</linearGradient> 
<symbol id="AcmeLogo" viewBox="0,-40 160,80" > © 
<path d="M0,0 L40,-40 L40,-20 L160, -20 
L160,20 L40,20 L40,40z" 
fill="url(#AcmeRed)"/> (4) 
<path d="M16,-10 L35,-29 L35,-15 L155,-15 L155,-10 z" 
fill="url(#AcmeGold)"/> 
<path d="M13,-7 L16,-10 L155,-10 L155,-7 z" 
fill="url(#AcmeMaroon)"/> 
<text x="40" y="15" 
style="font-family:Arial; font-weight:bold; 
font-size:20pt;" 
fill="url(#AcmeWhiteGold) ">ACME</text> 
</symbol> 
</defs> 
<use xlink:href="#AcmeLogo" /> (5) 
</svg> 


O SVG 没有 设置 viewBox 属性 ， 它 的 比例 是 由 包含 logo 的 <symbol> 元 素 


控制 的 。 然 而 ， 默 认 的 宽 和 高 确保 图 片 在 插入 到 其 他 网 页 中 时 可 以 保持 
原始 宽 高 比 和 合理 的 默认 大 小 。 


斩 该 公司 有 四 种 商标 颜色 : AcmeRed、AcmeMaroon、AcmeGold 和 
AcmeWhiteGold。 每 种 颜色 都 使 用 一 个 <LinearGradient> 元 素 和 一 个 
<Stop> 元 素 定义 为 泻 染 服 务 。 


© logo 本 身 定义 在 <symbol> 元 素 内 ， 以 便 在 其 他 图 形 中 重复 使 用 。 
viewBox 在 坚 轴 中 点 建立 了 一 个 坐标 系 。 


























© symbol 内 的 每 一 个 形状 都 使 用 一 种 预先 定义 的 泻 染 服务 来 设置 填充 色 。 


O 在 SVG 内 使 用 <use> 元 素 绘 制 logo. <use> 元 素 没 有 任何 位 置 或 大 小 属 
性 ， 所 以 重复 使 用 的 <symbol> 将 会 拉 伸 填充 整个 SVG 区 域 。 


仔细 查看 会 发 现 每 个 渐变 都 由 两 个 元 素 组 成 ，<LinearGradient> 和 <stop>: 


<linearGradient id="AcmeRed"> 
<stop stop-color="#FF4022" /> 
</linearGradient> 


<linearGradient> 定义 了 这 染 服务 ， 并 且 设 置 了 引用 它 所 需要 的 id fA. 1% 
渐变 元 素 也 包含 定义 颜色 的 <stop> 元 素 。 通 常 的 渐变 中 会 有 多 个 stop KE 
义 初 始 、 最 终 以 及 中 间 的 颜色 。 

颜色 是 通过 表现 属性 stop-color 来 定义 的 。 还 有 一 个 可 选 的 表现 属性 stop- 
opacity， 类 似 于 fill-opacity 或 stroke-opacity， 但 颜色 值 默 认 是 完全 不 
透明 的 。 


























虽然 例 5-1 在 每 个 浏览 器 的 测试 中 都 按照 预期 的 执行 ， 但 在 
Apache Batik 中 将 会 执行 失败 ， 因 为 它 对 语法 的 要 求 更 加 严 
格 。 为 了 使 其 能 够 正常 工作 ，<stop> 元 素 需 要 一 个 offset 属 
性 ， 我 们 将 在 6.1 节 中 讨论 。 








因为 颜色 是 单独 设 定 的 ， 所 以 我 们 很 容易 统一 改变 它们 的 颜色 或 添加 相同 
的 动画 。stop-color 是 一 个 表现 属性 ， 你 甚至 不 需要 通过 编辑 XML 来 改变 
颜色 ， 而 是 可 以 使 用 Css 规则 来 覆盖 。 


结果 ， 你 可 以 使 用 CSS 条 件 规 则 来 改变 颜色 。 含 有 媒体 查询 的 样式 表 可 以 
用 于 给 高 质量 打印 机 或 灰 度 打印 指定 打印 颜色 。 由 于 这 些 颜色 用 于 在 图 形 
的 其 他 部 分 进行 引用 ， 样 式 表 不 需要 辨认 使 用 每 种 颜色 的 所 有 元 素 ， 也 不 
需要 区 分 Fill 和 stroke 的 值 。 


虽然 stop-color 是 一 个 表现 属性 ， 但 它 默 认 是 不 可 继承 的 。 
它 必须 明确 地 直接 在 <stop> 元 素 上 设置 ， 或 者 使 用 inherit 
关键 词 设置 。 




















例 5-2 给 出 了 打印 样式 的 部 分 样本 。 对 于 彩印 ， 它 使 用 HSL 函数 来 重新 定 
义 颜 色 ， 然 后 它 会 被 映射 到 打印 设备 使 用 的 整个 色 域 。 对 于 黑白 打印 ， 它 
会 给 每 个 颜色 分 配 一 个 灰色 阴影 ， 这 会 创造 出 比 颜色 自动 转换 为 灰色 更 强 
的 对 比 度 。 灰 度 版 本 的 logo 如 图 5-3 所 示 。 
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B 5-3: 把 使 用 命名 颜色 的 ACME logo 转换 为 黑白 色 
例 5-2 为 打印 图 形 重 新 定义 命名 颜色 


@media print AND (color) { 


} 


#AcmeRed stop { stop-color: 
#AcmeMaroon stop { stop-color: 
#AcmeGold stop { stop-color: 


#AcmeWhiteGold stop { stop-color: 


@media print AND (monochrome) { 


#AcmeRed stop { stop-color: 
#AcmeMaroon stop { stop-color: 
#AcmeGold stop { stop-color: 


#AcmeWhiteGold stop { stop-color: 


hsl(10, 100%, 60%); } 
hsl( 0, 65%, 30%); } 
hsl(60, 100%, 60%); } 
hsl(55, 


#555; 
#222; 
#DDD; 
#FFF; 


w w w w 


100%, 90%); } 


虽然 大 部 分 浏览 器 在 打印 网 页 时 可 以 正确 应 用 CSS 打印 样 





式 ， 但 当 用 户 在 彩色 打印 机 上 进行 黑 








总 会 应 用 黑白 样式 。 








白 打 印 时 ， 浏 览 器 并 不 


使 用 渲染 样式 来 给 非 标准 颜色 命名 还 会 使 你 的 代码 更 易于 他 人 阅读 。 使 用 


有 意义 的 id 值 ， 


发 人 员 来 说 都 更 加 清楚 明白 。 


会 使 每 个 元 素 的 颜色 和 用 途 对 于 将 来 接管 你 工作 的 任何 开 





聚焦 未 来 
<solidcolor> 泻 染 服务 


命名 颜色 的 洽 染 服务 有 许多 好 处 。 但 是 用 单 色 渐变 来 创建 命名 颜色 多 少 有 
点 儿 问 题 ， 这 肯定 不 是 这 些 元 素 的 最 初 用 途 。 


所 以 SVG 2 中 使 用 <solidcolor> 来 创建 单 色 演 染 服务 。 它 使 用 solid- 
color 和 solid-opacity 表现 属性 来 设置 颜色 的 值 。 


使 用 <solidcolor> 元 素 的 话 ， 例 5-1 中 的 四 种 商标 颜色 可 以 这 样 定义 : 


<solidcolor id="AcmeRed" solid-color="#FF4022" /> 
<solidcolor id="AcmeMaroon" solid-color="#80201C" /> 
<solidcolor id="AcmeGold" solid-color="#FFFC32" /> 


<solidcolor id="AcmeWhiteGold" solid-color="#FFFCEO" /> 
这 不 仅 减 少 了 标记 的 数量 ， 还 使 得 代码 更 容易 让 人 理解 。 
<solidColor> 元 素 (注意 大 写 的 C) 在 SVG Tiny 1.2 规范 中 就 已 经 引入 了 ， 
所 以 它 在 一 些 图 形 程序 中 得 到 了 支持 ， 但 是 你 需要 在 根 <svg> 元 素 上 明确 
地 设置 属性 version="1.2"。( 相 比 之 下 ，Web 浏览 器 会 忽略 version， 并 对 
所 有 的 SVG 内 容 使 用 最 新 的 规范 。) 最 新 的 SVG 2 规范 草案 中 改变 了 大 写 
字母 ， 使 元 素 对 HTML 更 加 友好 ， 不 幸 的 是 它 打破 了 区 分 大 小 写 的 XML 
查看 器 的 兼容 性 。 
在 本 书 编写 之 时 ，<solidColor> 和 <solidcolor> 都 没有 在 任何 主流 浏览 器 
的 稳定 版 中 得 到 支持 。 但 正在 开发 的 Firefox 会 对 此 加 以 支持 。 











矢量 图 形 通常 被 看 做 “ 线 图 "， 拥 有 锐利 的 边缘 以 及 连续 的 色 块 。 这 种 干 
净 、 简 洁 的 样式 通常 就 可 以 满足 你 的 设计 。 但 是 一 种 完整 的 图 形 语言 应 该 
有 创建 柔和 边缘 和 变换 颜色 的 选项 。 渐 变 是 SVG 中 实现 这 种 效果 的 最 简单 
的 方式 。 


渐变 是 从 一 种 颜色 或 不 透明 状态 平滑 过 渡 到 另 一 种 颜色 或 不 透明 状态 。 
SVG 目前 支持 两 种 类 型 的 渐变 : 线性 渐变 和 径 向 渐变 。 线 性 渐变 内 过 渡 阶 
段 的 每 种 颜色 沿 着 平行 线 的 方向 延伸 ， 而 径 向 渐变 内 每 种 颜色 都 是 一 个 环 
形 。 

本 章 介绍 了 SVG 渐变 的 基础 结构 ， 以 及 可 以 创建 的 不 同 颜色 变换 。 我 们 还 
会 对 比 创建 相似 效果 的 SVG 语法 与 CSS 语法 的 不 同 。 从 现在 开始 ， 所 有 
例子 中 的 渐变 都 使 用 默认 的 方向 以 及 比例 ， 并 利用 它们 填充 简单 的 长 方形 。 
接 下 来 的 章节 将 会 讲解 更 加 灵活 的 SVG 渐变 。 


6.1 逐步 渐变 


例 5-1 的 单 色 渐 变 演 示 了 创建 一 个 渐变 所 需 的 最 少 标记 。 但 我 们 没有 使 用 任 
何 创建 渐变 效果 的 特性 。 要 想 看 到 颜色 过 湾 的 效果 ， 我 们 至 少 需要 两 个 颜 
色 结 点 (stop ) 。 


双色 线性 渐变 的 基础 结构 如 下 所 示 : 
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<linearGradient id="red-blue"> 

<stop stop-color="red" offset="0"/> 

<stop stop-color="LightSkyBlue" offset="1"/> 
</linearGradient> 


两 个 <stop> 元 素 定义 了 创建 渐变 所 需要 混合 的 颜色 ， 填 充 长 方形 的 结果 如 
图 6-1 所 示 。 每 个 <stop> 都 有 一 个 新 的 属性 offset， 它 用 于 定义 颜色 在 渐 
变 中 的 位 置 。offset 的 值 可 以 使 用 0.0 到 1.0 之 间 的 数字 或 百分比 来 表示 。 
本 例 中 ， 渐 变 最 开始 是 纯 红色 ， 最 后 是 浅 鉴 色 。 

















6-1: 有 两 个 结 点 颜色 的 渐变 


当 颜 色 结 点 超过 两 个 时 ，offset 之 间 的 间隔 会 控制 颜色 变化 的 频率 。 图 6-2 
显示 了 使 用 不 对 称 渐变 的 结果 ， 代 码 如 下 : 


<linearGradient id="red-blue-2"> 
<stop stop-color="red" offset="0"/> 
<stop stop-color="LightSkyBlue" offset="0.3"/> 
<stop stop-color="red" offset="1"/> 
</linearGradient> 

















6-2; ZT offset 值 不 规则 的 结 点 创建 的 渐变 


如 果 第 一 个 offset 的 值 大 于 0 或 最 后 一 个 offset 的 值 小 于 1， 渐 变 部 分 的 
两 侧 将 会 使 用 纯色 块 填充 ， 如 图 6-3 所 示 ， 代 码 如 下 : 


<linearGradient id="red-blue-3"> 

<stop stop-color="red" offset="0.3"/> 

<stop stop-color="LightSkyBlue" offset="0.7"/> 
</linearGradient> 




















图 6-3: 使 用 两 个 结 点 ， 与 边缘 之 间 有 偏 移 的 渐变 
这 实际 上 就 是 只 使 用 一 个 <stop> 元 素 所 产生 的 效果 ， 就 像 纯 色 渐变 〈 例 
5-1) 那样 : 两 侧 的 偏 移 使 用 同样 的 纯色 填充 。 


0 到 1 (或 0% 到 100%) 范围 之 外 的 offset 值 将 会 被 限制 在 
这 个 间隔 之 内 。 


T 





XML 元 素 的 顺序 很 重要 ，<stop> 元 素 必须 按照 从 渐变 开始 到 结束 的 顺序 设 
置 。 如 果 你 定义 的 offset 的 值 比 之 前 结 点 元 素 的 offset 的 值 小 ， 它 会 被 调 
整 为 等 于 前 面 元 素 中 最 大 的 offset 值 。 


如 果 连 续 的 结 点 拥有 相同 的 offset， 你 将 会 创建 锐利 的 边缘 或 条 纹 ， 如 图 
6-4 所 示 ， 代 码 如 下 : 


<linearGradient id="red-blue-4"> 
<stop stop-color="red" offset="0.3"/> 
<stop stop-color="lLightSkyBlue" offset="0.3"/> 
<stop stop-color="LightSkyBlue" offset="0.7"/> 
<stop stop-color="red" offset="0.7"/> 
</linearGradient> 




















6-4: 使 用 渐变 创建 条 纹 
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6.2 ”透明 渐变 


之 前 的 例子 使 用 的 都 是 完全 不 透明 的 渐变 颜色 ， 但 我 们 说 过 渐变 也 可 以 很 
好 地 控制 不 透明 度 。 一 种 方法 是 使 用 rgba() 和 hsla() 这 种 半 透 明 颜色 来 给 
stop-color 设 值 。 但 SVG 有 一 种 更 简单 的 方式 ， 它 允许 独立 于 颜色 之 外 控 
制 不 透明 度 。 


每 个 渐变 结 点 的 不 透明 度 由 stop-opacity 属性 来 控制 ， 就 像 所 有 其 他 不 透 
明度 属性 一 样 ， 它 的 值 是 0 到 1 之 间 的 一 个 数字 。 同 时 与 stop-color 一 样 ， 
它 的 值 默认 是 不 继承 的 。 

你 可 以 使 用 stop-opacity 创建 一 种 颜色 从 不 透明 过 渡 到 透明 的 渐变 ， 也 可 
以 使 用 以 下 代码 实现 同时 变换 颜色 和 不 透明 度 : 


<LinearGradient id="red-blue-5"> 





<stop stop-color="red" stop-opacity="0" offset="0"/> 
<stop stop-color="lightSkyBlue" stop-opacity="1" offset="1"/> 
</linearGradient> 





图 6-5 中 显示 的 半 透 明 新 变 是 在 文本 “Gradients” 之 上 填充 矩形 。 在 最 左边 
是 纯 红色 ， 但 它 是 完全 透明 的 。 随 着 新 变 往 右 进行 ， 颜 色 也 随 着 改变 ， 同 
时 变 得 更 加 不 透明 ， 使 文本 越 来 越 模糊 。 

















6-5: 半 透 明 颜 色 渐变 


这 里 唯一 需要 的 属性 是 offset， 而 stop-color 默认 是 黑色 且 stop-opacity 
默认 是 1 (100% 不 透明 ， 或 者 说 没有 透明 度 ) 。 在 许多 颜色 渐变 中 ， 我 们 不 
设置 不 透明 度 值 而 使 用 它 的 默认 值 ， 同 样 你 也 可 以 不 设置 颜色 值 ， 这 样 的 
话 ， 渐 变 就 会 从 透明 黑色 过 渡 到 不 透明 黑色 。 
<linearGradient id="brightness"> 
<stop offset="0" stop-opacity="0"/> 
<stop offset="1" /> 
</lLinearGradient> 


该 渐变 如 图 6-6 所 示 ， 且 同样 在 渐变 填充 的 矩形 下 面 绘制 文本 ， 以 此 来 突出 









































不 透明 度 的 改变 。 

















图 6-6: 单 色 不 透明 度 渐变 


6.3 控制 颜色 变换 


我 们 可 以 使 用 更 多 的 结 点 来 创建 更 加 复杂 的 渐变 。 例 如 ， 下 面 的 例子 将 创 
建 一 个 彩虹 渐变 ， 从 品 红 到 蓝 色 再 到 青色 、 绿 色 、 黄 色 、 红 色 、 染 色 ， W 
回 到 品 红 ， 构 成 一 个 完全 饱和 颜色 的 循环 : 


<linearGradient id="rainbow"> 
<stop stop-color="#FOF" offset="0"/> 
<stop stop-color="#00F" offset="0.1667"/> 
<stop stop-color="#0FF" offset="0.3333"/> 
<stop stop-color="#0F0" offset="0.5"/> 
<stop stop-color="#FFO" offset="0.6667"/> 
<stop stop-color="#F00" offset="0.8333"/> 
<stop stop-color="#F0F" offset="1"/> 

</linearGradient> 


彩虹 渐变 效果 如 图 6-7 所 示 。 


















































图 6-7; 使 用 7 个 结 点 形成 的 彩虹 渐变 


明确 设置 颜色 结 点 是 为 了 保证 在 任何 时 候 都 至 少 有 一 个 颜色 通道 保持 最 大 
化 ， 维 持 完全 饱和 的 效果 。 下 面 的 代码 片段 使 用 HSL 函数 设置 颜色 并 使 用 
百分比 来 设置 偏 黎 ， 定 义 了 一 个 完全 相同 的 渐变 : 
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<linearGradient id="rainbow"> 
<stop stop-color="hsl(300, 100%, 50%)" offset="0%" /> 
<stop stop-color="hsl(240, 100%, 50%)" offset="16.67%" /> 
<stop stop-color="hsl(180, 100%, 50%)" offset="33.33%"/> 
<stop stop-color="hsl(120, 100%, 50%)" offset="50%" /> 
<stop stop-color="hsl( 60, 100%, 50%)" offset="66.67%" /> 
<stop stop-color="hsl( 0, 100%, 50%)" offset="83.33%"/> 
<stop stop-color="hsl(-60, 100%, 50%)" offset="100%" /> 

</linearGradient> 


品 红 ， 也 被 称 为 紫红 色 ， 使 用 了 300 度 的 色相 (渐变 的 起 
点) 和 -60 度 的 色相 (渐变 的 终点 ) 来 定义 。 因 为 他 们 在 圆 
中 角度 相同 ， 在 色 轮 中 对 应 的 色相 也 相同 。 











虽然 可 以 用 HSL 值 来 指定 颜色 ， 但 是 颜色 是 通过 RGB 颜色 空间 直线 混合 
的 ， 而 不 是 通过 HSL 色 轮 的 旋转 角度 来 混合 。 正 如 3.4 节 所 说 ， 中 间 颜 色 
受到 sRGB 模型 中 颜色 亮度 的 权重 影响 。 一 旦 调整 为 SRGB 模型 ， 每 个 通 
道 ( 红 、 绿 、 蓝 ) 的 值 都 会 单独 增加 或 减少 。 

















图 6-8: 使 用 红色 、 蓝 色 、 绿 色 结 点 (上 ) 和 使 用 品 红 、 青 色 、 黄 色 结 点 (T) 形 
成 的 彩虹 渐变 


如 果 我 们 没有 指定 首要 和 次 要 颜色 ， 品 红 (#FOF) 和 青色 (HOFF) 的 中 
点 将 不 是 完全 饱和 的 蓝 色 (#00F)， de aa 得 多 的 蓝 色 ， 因 为 它 有 部 
分 红色 通道 和 绿色 通道 变 浅 。 如 果 你 混合 纯 红色 (#F00) 和 饱和 的 蓝 色 
(#00F)， 结 果 将 是 一 个 深 紫 色 (两 个 颜色 通道 都 处 于 完全 打开 和 关闭 的 中 
间 )， 而 不 是 一 个 完全 饱和 的 品 红 。 





图 6-8 比较 了 使 用 首要 颜色 生成 的 深 暗 色 混合 与 使 用 次 要 颜色 生成 的 更 淡 、 
更 有 生机 的 渐变 。 生 成 该 图 的 完整 代码 如 例 6-1 所 示 。 


例 6-1 比较 两 个 多 色 渐 变 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xlink" 
width="4in" height="2in"> 
<title xml: lang="en">Dark and Light Rainbow Gradients</title> 
<linearGradient id="primary"> 
<stop stop-color="#F00" offset="0"/> 
<stop stop-color="#00F" offset="0.3333"/> 
<stop stop-color="#0F0" offset="0.6667"/> 
<stop stop-color="#F00" offset="1"/> (2) 
</linearGradient> 
<linearGradient id="secondary"> 
<stop stop-color="#FOF" offset="0"/> 
<stop stop-color="#0FF" offset="0.3333"/> 
<stop stop-color="#FFO" offset="0.6667"/> 
<stop stop-color="#FOF" offset="1"/> 
</linearGradient> 
erect width="85.714%" height="1in" x="0" y="0" 
fill="url(#primary)" /> 
<rect width="85.714%" height="1in" x="14.286%" y="1in" 
fill="url(#secondary)" /> 
</svg> 


O BX <linearGradient> 元 素 可 以 包含 在 <defs> 块 中 ， 但 这 并 不 是 必需 
的 ， 因 为 渐变 永远 不 会 平 白 无 故地 直接 绘制 。 

O 每 个 渐变 都 使 用 了 三 种 颜色 ， 但 有 四 个 结 点 ， 这 是 为 了 在 最 后 循环 到 初 
始 颜色 。 


O 两 个 矩形 均 占 据 整 个 图 形 七 分 之 六 的 宽度 (85.714%)， 且 相互 偏 移 了 图 
形 宽度 的 七 分 之 一 (14.286%) 〈 抑 形 宽度 的 六 分 之 一 )， 这 是 为 了 对 准 
渐变 中 色相 大 致 相同 的 部 分 。 注 意 由 于 sRGB 模型 的 调整 导致 色相 不 会 
完美 对 齐 ， 例 如 品 红 和 青色 中 间 仍 然 是 浅 紫 色 。 

如 图 6-8 所 示 ， 定 义 谊 染 服 务 的 标记 有 时 会 比 定义 被 请 染 图形 的 标记 还 长 。 

为 了 更 好 的 组 织 结 构 ， 可 重复 使 用 的 内 容 通常 放置 在 文件 的 顶部 ， 且 通常 

使 用 <defs> (definitions) 元 素来 进行 分 组 。 另 外 ， 如 果 渐 变 只 被 使 用 一 

次 ， 你 可 能 希望 直接 在 使 用 它 的 形状 定义 之 前 定义 它 。 

为 了 获得 理想 的 浏览 器 支持 ， 应 该 在 定义 使 用 渐变 的 元 素 之 
前 先 在 文档 中 定义 渐变 。 许 多 版 本 的 Safari 将 不 能 正常 使 用 
定义 在 文件 后 面 的 渐变 。 











简单 的 渐变 | 67 


css 5 SVG 
使 用 CSS 函数 来 定义 渐变 
渐变 通过 Image Values and Replaced Content Module 规范 被 引入 CSS3 中 ， 
该 规范 是 WIC 候选 提议 且 它 在 所 有 最 新 的 Web 浏览 器 中 都 得 到 了 支持 。 
如 果 想 要 支持 旧 的 浏览 器 ， 需 要 给 样式 声明 添加 旧 的 实验 性 的 语法 前 缓 ， 
但 在 TE10 之 前 和 Opera Mini 浏览 器 中 都 不 支持 。 


虽然 CSS 和 SVG 渐变 最 终 的 结果 非常 相似 ， 但 在 定义 和 使 用 过 程 中 还 是 有 
se aus u iy neta 
将 在 接 下 来 的 几 章 中 重点 介绍 。 
两 者 之 间 最 明显 的 不 同 是 定义 的 方式 : SVG 渐变 是 通过 XML 标签 元 素来 
创建 ， 而 CSS 渐变 是 在 样式 表 内 使 用 函数 来 创建 。 
使 用 CSS 中 的 Linear-gradient 函数 创建 一 个 简单 的 线性 渐变 ， 函 数 的 参 
数 是 使 用 过 号 分 隔 的 颜色 结 点 值 列表 。 每 一 个 结 点 由 空格 分 隔 的 颜色 值 和 
偏 移 值 组 成 ， 如 下 所 示 : 

background: linear-gradient(red 0%, lightSkyBlue 100%); 


background: linear-gradient(#FOF 0%, #0FF 33.33%, 
#FFO 66.67%, #FOF 100%); 


CSS 线性 渐变 默认 的 方向 是 从 上 到 下 ， 而 SVG 默认 的 方向 是 从 左 到 右 (我 
们 将 在 第 7 章 中 介绍 如 何 改变 两 种 类 型 渐变 的 方向 ) 。 


果 没 有 设置 偏 移 值 ， 结 点 将 会 在 0% 到 100% 之 间 平 均 分 布 。 因 此 下 列 代 
码 实现 与 上 面 代码 相同 的 渐变 效果 : 


background: linear-gradient(red, lightSkyBlue); 
background: linear-gradient(#FOF, #0FF, #FFO, #FOF); 


如 果 只 指定 了 部 分 偏 移 的 值 ， 没 有 指定 的 值 将 在 设置 的 点 之 间 平 均 分 配 。 


定义 CSS 渐变 偏 移 时 不 能 使 用 小 数 来 代替 百分数 ， 但 是 你 可 以 使 用 长 度 单 
位 或 calc() 函数 来 定义 它 。 例 如 ， 如 下 的 CSS 创建 了 一 个 背景 渐变 ， 在 
padding 区 域 从 黑色 渐变 到 白色 ， 但 是 无 论 元 素 多 高 ， 剩 余部 分 范围 内 都 是 
纯 白 色 : 

padding: 1em; 


background: linear-gradient(black, white 1em, 
white calc(100% - 1em), black); 





你 还 可 以 给 偏 移 设置 大 于 100% 或 小 于 0 的 值 ， 颜 色 将 会 根据 渐变 的 可 见 部 
分 是 否 是 更 大 的 渐变 的 一 部 分 来 进行 调整 。 

在 CSS 渐变 中 没有 办 法 直接 设置 stop-opacity 值 ， 但 是 你 可 以 使 用 rgba() 
和 hstLa() 颜色 函数 来 定义 半 透 明 的 颜色 。 


CSS 渐变 和 SVG 渐变 之 间 一 个 更 细微 不 同 是 ，CSS 不 可 以 把 泻 染 服务 定义 
为 一 种 唯一 的 资源 类 型 ， 相 反 ，CSS 渐变 被 定义 为 一 个 单独 的 没有 固定 尺 
thet HOM KEAN, 

CSS 渐变 函数 用 于 代替 urL() 对 图 片 文件 的 引用 ,主要 用 在 background- 
image 列表 (或 者 简写 的 background) 中 。 它 还 可 以 被 用 在 list-style- 
image 或 border-image 属性 中 ， 尽 管 浏览 器 是 在 支持 背景 渐变 之 后 才 支 持 这 
些 属性 的 。 


目前 CSS 渐变 不 可 以 用 于 代替 SVG 元 素 中 Fill 和 stroke 属性 引用 的 泻 染 
服务 ， 但 在 SVG 2 中 这 一 点 很 可 能 会 改变 。 
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第 7 章 


各 种 形状 和 尺寸 的 渐变 





目前 为 止 ， 我 们 已 经 讨论 了 如 何 创建 渐变 ， 如 何在 渐变 的 起 点 (Ac) 和 终 
点 〈 右 ) 之 间 设 置 含有 颜色 和 不 透明 度 的 结 点 的 位 置 。 如 果 你 涉及 的 所 有 
图 形 中 渐变 的 方向 都 要 求 从 左 到 右 ， 那 么 现在 所 学 的 知识 就 已 经 足够 了 。 
但 是 ， 很 可 能 你 希望 渐变 是 沿 从 上 到 下 ， 或 者 60 度 的 方向 ， 或 有 其 他 的 一 


些 变换 。 


本 章 讨论 了 两 种 控制 线性 渐变 位 置 的 方式 ， 还 讨论 了 如 何 控制 它 的 缩放 。 
我 们 假定 你 已 经 可 以 正确 使 用 基础 的 SVG 形状 元 素 (尤其 是 <Line>)、 坐 
标 系 以 及 变换 。 它 们 之 间 细 微 复 杂 的 区 别 你 要 心中 有 数 ， 此 外 SVG 和 CSS 
在 细节 上 也 有 一 些 区 别 ， 我 们 也 会 着 重 介绍 这 些 内 容 。 

不 同 的 Web 浏览 器 在 平滑 演 染 渐变 的 效果 上 有 明显 差异 ， 我 们 对 此 无 能 大 
力 。 尤 其 是 在 使 用 锐利 的 颜色 过 渡 时 ， 所 以 一 定 要 测试 代码 ， 确 保 运 行 的 
结果 你 可 以 接受 。 


~ ally I= 
7.1 渐变 天 量 
设置 渐变 位 置 的 第 一 种 方式 是 使 用 x1、y1、x2 和 y2 等 属性 来 定位 渐变 的 起 
点 和 终点 ， 就 像 画 一 条 线 一 样 。 默 认 情 况 下 ，x2 的 值 是 100%， 其 他 属性 的 
值 为 0。 如 果 你 使 用 这 些 属性 值 来 画 一 条 线 ， 它 将 沿 着 图 形 的 顶部 从 左 到 右 
绘制 ; 


<line x1="0" y1="0" x2="100%" y2="0" /> 
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如 有 果 你 想 画 一 条 从 左上 角 到 右 下 角 的 对 角 线 ， 你 将 使 用 如 下 代码 : 
<line x1="0" y1="0" x2="100%" y2="100%" /> 


那么 设置 相同 属性 的 线性 渐变 表示 的 是 什么 呢 ? 这 些 由 属性 定义 的 线 被 称 
为 渐变 矢量 。 结 点 的 偏 移 ， 以 及 它们 之 间 颜 色 的 混合 值 ， 都 是 根据 这 条 线 
的 长 度 来 度量 的 。 颜 色 会 无 限 延 伸 到 线条 的 两 端 。 对 于 如 下 渐变 ， 蓝 色 的 
结 点 在 左上 角 (使 用 x1 和 yl 定义 的 点 )， 而 绿色 结 点 在 右 下 角 (使 用 x2 和 
y2 定义 ) : 
<linearGradient id="blue-green" 
x1="0" y1="0" x2="100%" y2="100%" > 
<stop stop-color="blue" offset="0"/> 


<stop stop-color="darkSeaGreen" offset="1"/> 
</linearGradient> 


当然 你 也 可 以 利用 各 个 属性 的 默认 值 ， 仅 使 用 以 下 属性 就 能 实现 与 上 述 相 
同 的 渐变 

<LinearGradient id="blue-green" y2="100%" > 
如 图 7-1 所 示 ， 设 置 渐变 矢量 属性 值 为 0% 或 100% 的 所 有 可 能 的 组 合 来 填 
充 长 方形 ， 去 除 起 始点 和 终点 为 同一 点 的 情况 。 每 一 列 分 别 以 不 同 角 处 的 
点 (以 (x1,y7) 值 定义 ) 作为 矢量 的 起 点 ， 每 一 行 分 别 以 不 同 的 点 作为 终点 。 

















图 7-1: 使 用 不 同 渐变 矢量 定义 的 渐变 
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如 果 新 变 矢 量 的 起 点 和 终点 相同 ， 图 形 将 会 以 纯色 来 进行 填 
充 。 具 体 是 哪 一 种 颜色 目前 完全 依赖 于 浏览 器 。SVG 规范 中 
规定 整个 区 域 应 该 使 用 最 后 一 个 渐变 结 点 的 颜色 ， 但 是 编写 
本 书 时 ，Blink 和 WebKit 浏览 器 以 及 下 浏览 器 都 是 用 第 一 
个 渐变 结 点 中 定义 的 颜色 来 填充 的 。 








例 7-1 给 出 了 绘制 图 7-1 的 部 分 代码 。 代 码 中 使 用 了 渐变 的 简写 形式 : 如 果 
你 在 渐变 中 使 用 xLink:href 属性 来 引用 另 一 个 渐变 ， 新 的 渐变 继承 旧 的 浙 
变 ， 然 后 根据 新 的 属性 来 做 出 相应 的 改变 。 如 本 例 所 示 ， 如 果 新 的 渐变 没 
有 任何 <stop> 元 素 ， 则 会 使 用 引用 的 渐变 中 的 结 点 。 


xLink:href 属性 值 是 一 个 URL， 但 是 根据 SVG 1.1 规范 ， 它 
应 该 指向 相同 文档 中 的 一 个 元 素 。 但 是 Firefox 中 支持 链接 
外 部 文件 中 定义 的 渐变 。 




















例 7-1 中 在 每 个 渐变 的 上 方 都 绘制 一 条 线 来 表示 渐变 矢量 ，marker 用 于 在 
线条 的 终点 绘制 第 头 来 告诉 你 它 指向 哪个 方向 。 


例 7-1 使 用 属性 来 设置 渐变 矢量 的 位 置 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xlLink" 
width="400px" height="300px" viewBox="0 0 400 300"> 
<title>Same Gradient, Different Vectors</title> 
<style type="text/css"> 
line { 
stroke: darkMagenta; (1) 
stroke-width: 2; 
marker-start: url(#start); 
marker-end: url(#end); 
} 
marker { 
fill: darkMagenta; 
stroke: none; (2) 


svg { 
overflow: visible; 
} 


</style> 
<defs> 
<linearGradient id="blue-green" > © 
<stop stop-color="blue" offset="0"/> 
<stop stop-color="darkSeaGreen" offset="1"/> 
</linearGradient> 
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<marker id="start" viewBox="-2 -2 4 4"> @ 
<circle r="1.5"/> 
</marker> 
<marker id="end" viewBox="-4 -2 4 4" orient="auto"> 
<polygon points="-4,-2 0,0 -4,2"/> 
</marker> 
</defs> 


<g transform="translate(2,2)"> © 
<svg width="1in" height="1in"> 
<linearGradient id="blue-green-1" xlink:href="#blue-green"/> 
<rect width="100%" height="100%" fill="url(#blue-green-1)"/> 
<line x1="0" y1="0" x2="100%" y2="0"/> o 
</svg> 


<svg width="1in" height="1in" x="0" y="100"> 
<linearGradient id="blue-green-2" xlink:href="#blue-green" 
x2="100%" y2="100%" /> (3) 
<rect width="100%" height="100%" fill="url(#blue-green-2)"/> 
<line x1="0" y1="0" x2="100%" y2="100%" /> 
</svg> 


<!-- 9 more samples omitted for length --> © 


<svg width="1in" height="1in" x="300" y="200"> 
<linearGradient id="blue-green-12" xlink:href="#blue-green" 
x1="100%" y1="100%" x2="0" y2="100%"/> @ 
<rect width="100%" height="100%" fill="url(#blue-green-12)"/> 
<line x1="100%" y1="100%" x2="0" y2="100%" /> 
</svg> 
</g> 
</svg> 
O <line> 元 素 必 须 设置 stroke 属性 来 变 得 可 见 ， 两 个 marker 属性 用 于 创 
建 箭头 效果 。 
@ marker 使 用 与 line 描 边 相配 的 颜色 填充 ， 明 确 把 stroke 属性 设置 为 
none 是 为 了 解决 IE 浏览 器 中 marker 会 从 Line 继承 样式 的 bug。 
O 第 一 个 渐变 永远 都 不 会 直接 使 用 ， 它 为 所 有 其 他 的 渐变 定义 渐变 结 点 。 
O <marker> 元 素 用 于 绘制 箭头 和 矢量 的 轴 点 。 

O 每 一 样 块 都 绘制 为 1 平方 英寸 (96px) ， 为 了 添加 内 边 距 的 效果 ， 每 隔 
100px 放置 一 个 样 块 ， 并 从 距离 顶部 和 左边 2px 偏 移 的 地 方 开始 绘制 。 
O 每 一 个 <LinearGradient> 使 用 xlink:href 来 从 主 渐 变 中 复制 结 点 ， 
blue-green-1 渐变 使 用 默认 的 位 置 属性 来 创建 一 个 从 左 到 右 的 渐变 。 


O 明确 地 使 用 相同 的 位 置 属性 声明 <Line> 元 素来 显示 矢量 。 
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O 对 于 第 二 个 (以 及 以 后 的 ) 样 块 ， 必 须 明 确 设置 渐变 矢量 的 部 分 或 全 部 
位 置 属性 。 

O 你 应 该 可 以 从 图 7-1 所 示 的 箭头 想象 出 省 略 的 代码 是 什么 ， 把 它们 都 打 
印 在 书 上 就 显得 太 哆 吴 了 。 更 好 的 做 法 是 使 用 JavaScript 来 生成 所 有 的 
元 素 而 不 是 重复 标记 。 

© 对 于 最 后 一 个 渐变 ， 所 有 的 位 置 属性 都 被 明确 设 定 来 创建 一 个 沿 着 长 方 
形 底部 从 右 到 左 的 渐变 矢量 。 注 意 最 终生 成 的 渐变 在 效果 上 与 沿 着 长 方 
形 顶 部 从 右 到 左 的 矢量 创建 的 渐变 完全 相同 。 

图 7-1 中 的 所 有 渐变 例子 都 是 从 一 个 角 到 另 一 个 角 ， 跨 越 整个 正方 形 。 但 并 

不 是 必须 这 样 做 。 如 果 矢 量 没 有 覆盖 整个 形状 ， 默 认 会 使 用 纯色 来 填充 剩 

下 的 部 分 。 效 果 就 好 像 分 别 给 第 一 个 和 最 后 一 个 结 点 设置 偏 移 使 它们 偏离 

渐变 矢量 的 起 点 和 终点 。 











改变 渐变 矢量 的 长 度 和 改变 偏 移 在 重复 渐变 中 会 有 不 同 的 效 
果 ， 我 们 将 在 第 8 章 中 对 此 进行 讨论 。 








渐变 矢量 的 起 点 和 终点 可 以 扩展 到 0% 到 100% 这 个 区 域 之 外 ， 这 与 结 点 
偏 移 不 同 ， 不 会 位 于 0% 到 100% 之 间 。 你 可 能 会 问 :“100% 是 相对 于 谁 
AWE? ” 


7.2 WRBORS 

在 例 7-1 F, FRE ARRAY <svg> 元 素 在 每 个 占据 100% 宽 和 高 的 长 方形 
(也 就 是 每 个 渐变 ) 中 创建 局 部 坐标 系 。 这 意味 着 可 以 给 <Line> 元 素 的 坐 
标 设 置 百 分 比 ， 并 让 它 直 接 匹 配 渐变 向 量 使 用 的 百分比 。 

通常 你 要 使 用 渐变 填充 的 形状 不 会 占据 整个 坐标 系统 。 所 以 ， 理 解 这 一 点 
非常 重要 : 渐变 矢量 属性 中 的 值 默认 并 不 是 根据 绘制 <Line> 时 使 用 的 局 部 
坐标 系 来 度量 的 。 相 反 ， 它 们 是 基于 要 填充 的 形状 的 对 象 边界 盒 创 建 的 新 
坐标 系 来 定义 的 。 

那么 什么 是 对 和 象 边 界 盒 呢 ? 对 于 像 例 7-1 中 使 用 的 长 方形 ， 它 的 对 象 边 界 盒 
就 是 长 方形 。 更 准确 地 说 ， 就 是 长 方形 本 身 的 几何 面积 且 不 包括 任何 描 边 。 
对 于 其 他 形状 来 说 ， 就 是 可 以 将 图 形 包 含 在 本 身 (可 能 是 变换 后 ) 坐标 系 
内 的 最 小 矩形 。 再 次 声明 ， 边 界 盒 不 包括 任何 描 边 或 标记 。 
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图 7-2: 使 用 不 同 渐变 矢量 定义 的 渐变 来 填充 辆 


如 果 形 状 在 去 除 描 边 或 标记 之 后 高 或 宽 为 0， 那 么 它 的 边界 
盒 为 空 ， 且 渐变 将 会 视 为 错误 来 处 理 (将 会 使 用 降级 的 颜 


色 )。 这 在 绘制 直线 时 可 能 会 有 问题 ， 我 们 将 在 第 13 章 中 讨 
论 解 决 办 法 。 


对 于 非 矩形 形状 ， 产 变 矢 量 的 起 点 和 终点 可 能 在 形状 的 外 部 ， 也 可 能 在 0% 
和 100% 范围 之 内 。 图 7-2 显示 了 用 圆 来 替换 例 7-1 中 所 有 长 方形 的 最 终 
效果 : 


<circle cx="50%" cy="50%" r="50%" fill="url(#gradient-id)"/> 
每 个 圆 都 尽 可 能 地 填 满 它 的 局 部 坐标 系 ， 但 四 个 角 无 法 填充 。 渐 变 的 定义 方 
式 没 有 改变 ， 所 以 渐变 矢量 依然 是 从 角 到 角 的 。 对 角 矢量 的 最 终结 果 是 渐变 
中 起 始 和 终止 的 颜色 结 点 被 裁剪 掉 了 。 重 新 审视 我 们 的 泻 染 服务 ， 泻 染 效 果 
被 缩放 到 适应 整个 对 象 边界 盒 ， 不 过 后 来 庶 罩 带 被 删除 露出 下 面 形状 。 
如 上 所 述 ， 对 象 边 界 盒 整体 是 一 个 全 新 的 坐标 系 。 它 不 仅仅 把 百分比 缩放 
到 适合 整个 盒子 ， 而 且 对 基本 的 用 户 单位 也 做 了 同样 的 处 理 。 水 平方 向 上 
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的 一 个 单位 等 于 边界 框 宽度 的 100%， 垂 直方 向 上 的 一 个 单位 等 于 边界 框 高 
BERI 100%。 换 而 言 之 ， 你 可 以 使 用 0 到 1 之 间 的 小 数 来 代替 百分比 。 


你 甚至 还 可 以 使 用 带 单位 的 长 度 值 ， 但 是 〈 与 SVG 中 其 他 形式 的 缩放 一 致 ) 
长 度 单位 也 会 随 着 用 户 单位 来 缩放 。1px 的 长 度 等 于 1 个 用 户 单位 、 等 于 新 
坐标 系 中 宽 或 高 的 100%。 所 有 其 他 长 度 单 位 将 等 于 形状 宽 或 高 的 几 倍 。 


因为 单位 被 缩放 到 匹配 边界 盒 的 宽 和 高 ， 所 以 1 水 平 单位 不 一 定 等 于 1 垂 
直 单 位 。 例 7-1 中 它们 相等 是 因为 被 填充 的 形状 是 一 个 正方 形 。 最 终 ， 对 角 
渐变 矢量 是 一 条 完美 的 沿 45 度 方向 的 线 。 这 也 意味 着 与 渐变 矢量 垂直 (成 
直角 ) 的 线 是 一 条 相对 方向 的 45 度 线 ， 即 在 相对 的 角 之 间 的 对 角 线 。 


这 一 点 非常 重要 ， 因 为 这 些 垂 直线 相当 于 拥有 相同 颜色 的 渐变 的 一 部 分 。 
结 点 颜色 值 将 会 沿 着 渐变 矢量 垂直 线 癌 两 侧 扩展 。 但 渐变 矢量 正好 在 连接 
两 个 相对 角 的 盒 对 角 线 上 时 ， 渐 变 的 中 点 (等 于 50% 的 节点 偏 移 ) 的 垂直 
线 沿 着 盒子 剩 下 两 个 角 之 间 的 对 角 线 延长 。 例 7-2 构建 了 一 个 在 50% 偏 移 
的 位 置 发 生 颜色 又 变 的 渐变 来 突出 这 种 关系 。 


例 7-2 通过 对 角 渐变 创建 倾斜 的 条 纹 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.0rg/1999/xlink" 
width="100%" height="100%"> 
<title xml:lang="en">Stretched Object Bounding Box gradients 
</title> 
<style type='text/css'> 
</style> 
<linearGradient id="diagonal" y2="100%"> 
<stop offset="0" stop-color="white"/> 
<stop offset="0.5" stop-color="red"/> 
<stop offset="0.5" stop-color="blue"/> 
<stop offset="1" stop-color="white"/> 
</linearGradient> 
<rect height="100%" width="100%" fill="url(#diagonal)"/> 
</svg> 


在 例 7-2 中 ， 作 为 整体 的 SVG 和 渐变 填充 的 长 方形 都 被 设置 为 100% 来 填 
充 浏览 器 窗口 或 使 用 SVG 绘制 的 图 片区 域 的 宽 和 高 。 图 7-3 显示 了 对 角 渐 
变 绘制 在 一 个 正方 形 区 域 时 的 效果 。 渐 变 矢量 是 从 左上 到 右 下 的 45 度 的 对 
角 线 ， 渐 变 50% 偏 移 位 置 的 条 纹 正 好 是 右上 到 左下 的 对 角 线 。 

如 果 你 要 填充 的 形状 (更 准确 地 说 ， 是 对 象 边界 盒 ) 不 是 一 个 完美 的 正方 
É, HARE AWE? 对 角 线 将 不 是 45 度 角 。 但 是 ， 由 于 对 象 边 界 盒 坐标 
系 的 拉 伸 效果 ， 渐 变 的 中 点 依然 在 相对 角 的 对 角 线 上 ， 如 图 7-4 所 示 。 
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图 7-3: 在 一 个 正方 形 中 ,绘制 一 个 在 50% 偏 移 的 位 置 发 生 颜色 骤 变 的 对 角 渐 变 

















图 7-4: 在 一 个 长 方形 中 ,绘制 一 个 在 50% 偏 移 的 位 置 发 生 颜色 骤 变 的 对 角 渐 变 


颜色 相同 的 线 不 再 垂直 于 我 们 所 说 的 一 般 意义 上 的 渐变 矢量 ， 至 少 在 坐标 
系 表 象 中 不 是 这 样 。 在 拉 伸 的 坐标 系 中 ， 它 们 和 垂直 线 在 x P y 坐标 之 间 
拥有 相同 的 数学 关系 。 在 数学 上 ， 这 种 “理论 垂直 ” 线 实际 上 被 称 为 法 向 
量 ， 但 是 数学 家 对 什么 是 法 向 量 有 不 同 的 见解 。 

对 象 边 界 盒 坐标 系 因此 创建 了 一 个 不 均匀 的 缩放 ， 类 似 于 有 两 个 参数 的 


scale(sx,sy) 变换 或 preserveAspectRatio="none" 设置 。 
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灵 社 区 会 员 ChenyangGao(2339083510@qq.com) 专 享 尊重 版 权 


Q 


a 
7.3 在 盒子 表面 绘制 
如 果 你 阅读 仔细 ， 你 可 能 注意 到 了 不 久 前 出 现 的 “默认 ”。 对 象 边 界 
盒 单位 是 定义 渐变 矢量 的 默认 值 ， 但 它 不 是 唯一 的 选择 。 你 可 以 在 
<linearGradient> 元 素 上 使 用 gradientunits 属性 来 改变 它 。 
设置 gradientUnits 的 值 为 userspaceOnUse 使 浏览 器 在 用 于 绘制 要 填充 的 形 
状 的 坐标 系 内 解析 你 的 x1, y1, x2 和 y2 属性 。 


如 果 你 想 明 确 地 设置 默认 行为 ，gradientUnits 的 另 一 个 值 是 


objectBoundingBox。 




















75: 在 一 个 完全 填充 其 坐标 系 长 方形 中 ， 绘 制 一 个 在 50% 偏 移 位 置 发 生 颜 色 又 
变 的 用 户 空间 对 角 渐 变 


图 7-5 显示 了 修改 例 7-2 中 gradientunits 属性 值 的 结果 : 


<linearGradient id="diagonal" y2="100%" 
gradientUnits="userSpaceOnUse"> 


FAFA SE AC TERA, AR ee PAM SRA EAT a PPA. m, 
由 于 坐标 系 本 身 没 有 扭曲 ，50% 的 结 点 沿 着 真实 世界 的 直角 对 角 绘 制 ， 而 
不 再 连接 另外 两 个 角 。 

避免 坐标 系 被 扭曲 仅仅 是 使 用 userSpaceonUse 的 一 个 原因 。 通 过 userSpaceOnUse 
单位 ， 你 可 以 使 单个 渐变 在 形状 与 形状 之 间 效 果 一 致 。 实 例 见 例 7-3， 最 终 








结果 如 图 7-6 所 示 。 
例 7-3 使 用 userSpaceOnUse 渐变 单位 来 填充 多 个 形状 


<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="400px" height="300px" viewBox="0 0 400 300"> 
<title xml: lang="en">Tropical Sunset User-Space Gradient</title> 
<linearGradient id="sunset" gradientUnits="userSpaceOnUse" 
y1="1em" x2="0" y2="250px"> (1) 
<stop stop-color="midnightBlue" offset="0"/> 
<stop stop-color="deepSkyBlue" offset="0.25"/> 
<stop stop-color="yellow" offset="0.5"/> 
<stop stop-color="lightPink" offset="0.8"/> 
<stop stop-color="darkMagenta" offset="0.99"/> 











<stop stop-color="#046" offset="0.99"/> © 
</linearGradient> 
<rect height="100%" width="100%" fill="dimGray" /> © 
<g fill="url(#sunset)"> (4) 


<rect x="20" y="20" width="100" height="120" /> 

<rect x="280" y="20" width="100" height="120" /> 
<rect x="20" y="160" width="100" height="120" /> 
<rect x="280" y="160" width="100" height="120" /> 


</g> 
<rect x="140" y="0" width="120" height="300" 
fill="url(#sunset)" /> (5) 
</svg> 


@ 给 linearGradient 设置 userSpaceOnUse 值 允 许 我 们 使 用 长 度 (例如 lem 
或 250px) 来 定位 渐变 矢量 。xl 属性 没有 指定 ， 所 以 使 用 默认 值 0， 而 
x2 属性 (默认 为 100%) 被 重 置 为 0 来 创建 一 个 直线 垂直 渐变 。 


O 最 后 两 个 源 变 结 点 拥有 相同 的 偏 移 值 ， 在 夕阳 的 天 空 和 静止 的 水 面 之 
间 创 建 了 一 条 分 界线 。 所 有 超出 渐变 矢量 范围 的 点 都 会 被 这 染 为 暗 蓝 
绿色 #046。 

© 在 使 用 渐变 填充 的 元 素 下 ， 放 置 一 个 灰色 的 长 方形 来 填充 整个 SVG。 


O 与 往常 一 样 ， 你 可 以 在 组 元 素 上 定义 一 个 填充 值 ， 它 会 被 所 有 的 子 
形状 继承 。 但 是 ， 每 个 形状 仍然 会 单独 计算 渐变 ， 如 果 使 用 的 是 
objectBoundingBox 渐变 ， 每 个 形状 的 渐变 将 会 基于 它 自己 的 边界 盒 ， 而 
不 是 组 。 

O 为 了 证 明 渐变 的 连续 性 与 组 无 关 ， 中 间 的 长 方形 单独 进行 绘制 。 它 填 满 了 
SVG 的 高 度 ， 所 以 你 会 看 到 整个 渐变 ， 包 括 超出 渐变 矢量 的 纯色 部 分 。 
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图 7-6: 连续 跨越 多 个 图 形 的 渐变 


在 例 7-3 初始 代码 的 最 后 ，offset="1" 处 有 锐利 的 渐变 变换 
(在 天 空 和 大 海 之 间 )。 根 据 规范 ， 当 多 个 结 点 拥有 相同 的 偏 
移 值 时 ， 该 点 以 及 超出 部 分 填补 的 颜色 应 该 使 用 最 后 一 个 结 
点 中 定义 的 颜色 。 然 而 ，Blink 和 WebKit 浏览 器 会 忽略 最 后 
一 个 结 点 ， 而 使 用 darkMagenta 来 填充 剩 下 的 空间 。 


为 了 使 浏览 器 之 间 有 相同 的 结果 ， 避 免 在 0% 和 100% 的 偏 
移 处 使 用 锐利 的 过 渡 。 


图 7-6 中 的 图 片 可 以 使 用 单个 连续 渐变 来 填充 背景 ,然后 通过 复杂 的 路 径 来 
在 夕阳 之 上 创建 开 着 的 阳台 门 形状 。 相 反 ， 灰 色 门 框 实际 上 是 背景 唯一 可 见 
的 地 方 ， 窗 户 和 开放 区 域 其 实 是 在 它 上 面 绘制 的 长 方形 。 它 们 外 观 一 致 是 因 
为 它们 都 是 用 相同 的 连续 渐变 来 填充 。 但 是 ， 请 记 住 “ 用 户 空间 ”依然 不 是 
一 个 绝对 的 坐标 系 ， 它 会 被 任何 变换 或 应 用 在 填充 形状 的 瞳 套 坐标 系 所 影响 。 











所 有 浏览 器 都 会 把 变换 应 用 到 用 户 空间 泻 染 服务 上 ， 但 髓 套 
的 坐标 系 更 加 古怪 。WebKit、Blink 和 下 使 用 渐变 的 父 级 
SVG， 而 不 是 形状 ， 来 把 百分比 转换 为 用 户 单位 。 





css 5 SVG 
使 用 关键 词 来 设置 CSS 渐变 的 位 置 
正如 第 6 章 中 说 的 那样 ，CSS 线性 渐变 的 默认 方向 是 从 上 到 下 。 当 然 你 也 
可 以 改变 它 的 默认 方向 。 它 的 语法 与 SVG 完全 不 同 ， 且 与 早期 试验 性 的 
CSS 渐变 也 有 相当 多 的 不 同 ; 为 了 尽 可 能 地 支持 早期 的 浏览 器 ， 你 可 能 需 
要 使 用 一 个 CSS 预 处 理 程序 或 脚本 来 把 你 的 渐变 重 构 为 旧 的 语法 。 


要 想 改变 CSS 渐变 的 方向 ， 需 要 在 函数 中 颜色 结 点 之 前 添加 一 个 额外 的 参 
数 。 要 创建 整整 齐 齐 从 一 边 到 另 一 边 、 从 一 个 角 到 另 一 个 角 的 渐变 ， 你 可 
以 使 用 关键 词 : 第 一 个 关键 词 是 to， 接 着 是 left, right, top 或 bottom 之 
一 来 表示 边 ， 也 可 以 是 这 些 关键 词 的 组 合 (例如 top right) 表示 角 。 这 些 
关键 词 描 述 的 是 渐变 的 终点 (也 就 是 渐变 要 往 哪个 方向 )， 起 点 在 相反 一 侧 
或 相对 的 角 。 


当 使 用 角 来 表示 时 ， 渐 变 过 渡 的 角度 会 被 调整 ， 所 以 渐变 50% 偏 移 位 置 点 
连接 着 另外 的 角 。 虽 然 规范 中 实现 的 方式 不 同 ， 但 它 的 效果 和 对 象 边 界 盒 
单位 中 角 到 角 的 SVG 渐变 效果 一 样 。 


例 7-4 直接 比较 了 例 7-2 中 SVG 对 角 渐 变 (作为 图 片 吝 入 ) 和 一 个 相似 的 
CSS 渐变 (在 网 页 的 body 上 )。CSS 渐变 中 的 to bottom Left， 意 思 是 它 起 
始 于 右上 角 。 图 7-7 显示 了 最 终 效 果 ， 包 括 内 识 的 SVG HE. 


例 7-4 使 用 CSS 创建 对 角 条 纹 渐变 
<!DOCTYPE html> 
<html xml:lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Positioning CSS gradients using keywords</title> 
<style type='text/css'> 
html, body { 
height: 100%; 
margin: 0; padding: 0; 
} 
body { 
background: linear-gradient(to bottom left, 
white, red 50%, blue 50%, white); 
} 
img { 
position: absolute; 
width: 50%; height: 50%; l 
eft: 25%; top: 25%; 
} 
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</style> 
</head> 
<body> 
<img src="gradient-vector-diagonals.svg"> 
</body> 
</html> 





ll 














7-7: 把 一 个 CSS 渐变 作为 一 个 SVG 渐变 的 背景 


这 个 以 及 其 他 CSS 渐变 都 是 Firefox 中 的 截图 。 编 写本 书 时 ， 
Blink 浏览 器 在 渔 染 CSS 渐变 中 沿 着 对 角 线 的 急剧 转换 ， 万 
其 是 像 本 例 中 这 种 大 型 背景 时 ， 性 能 很 差 ， 对 角 线 会 参差 不 
齐 。 这 个 问题 在 SVG 渐变 中 有 所 消减 ， 但 并 没有 完全 消除 。 


对 于 较 小 的 图 片 ， 通 过 一 两 个 百分比 点 来 分 隔 结 点 偏 移 能 取 
得 可 接受 的 结果 ， 这 样 就 强制 创建 一 个 抗 混 登 的 效果 。 但 像 
这 样 整个 页 面 的 渐变 ， 只 能 创造 锯齿 状 的 紫色 线 。 


在 CSS 中 ， 你 无 法 控制 渐变 矢量 的 长 度 ， 线 性 渐变 通常 会 被 从 角 到 角 调 整 
到 刚好 适合 图 片区 域 。 如 果 要 在 内 容 两 侧 创 建 纪 色 块 ， 或 扩展 渐变 溢出 侈 
子 ， 你 可 以 通过 调整 第 一 个 和 最 后 一 个 结 点 的 偏 移 值 来 实现 。 在 讨论 SVG 
渐变 时 我 们 曾 提 过 ， 调 整 渐变 矢量 长 度 和 调整 偏 移 的 值 之 间 的 不 同 对 重复 
渐变 很 重要 。 

CSS 渐变 总 是 创建 长 方形 图 片 ， 所 以 它 没有 复杂 的 对 象 边界 金 。 然 而 ， 如 
果 你 使 用 圆 角 边框 或 裁剪 来 减少 图 片 的 可 见 区 域 ， 这 将 裁减 掉 渐 变 中 类 似 
于 SVG 中 的 圆 和 其 他 图 形 的 角 。 


CSS 中 没有 直接 对 应 用 户 空 间 渐 变 的 定义 。 对 于 背景 图 片 ， 你 可 以 使 用 
background-attachment: fixed 来 实现 相似 的 效果 。 








7.4 E, Z 


本 章 的 开头 我 们 提 到 过 SVG 中 有 两 种 控制 线性 渐变 方向 的 方式 。 第 二 种 方 
式 是 使 用 gradientTransforn 属性 。 

gradientTransform 属性 的 值 是 可 以 控制 形状 位 置 和 方向 的 相同 变换 函数 的 
列表 : 

。 translate(tx,ty) 仅 改 变 位 置 而 不 会 扭曲 

。 scale(s) 或 scale(sx,sy) 放大 、 缩 小 、 拉 伸 或 翻转 成 镜像 

。 rotate(a) 或 rotate(a,cx,cy) 围绕 原点 或 指定 点 进行 旋转 

。 skewX(a) 或 skewY(a) 沿 着 轴 或 其 他 线 倾斜 


可 以 串联 列 出 任意 多 个 这 些 国 数 。 

















聚焦 未 来 

使 用 CSS 规则 来 变换 渐变 
CSS Transforms Module 把 gradientTransform 这 个 表现 属性 映射 到 了 新 的 
CSS 样式 变换 属性 。 虽 然 目 前 还 没有 浏览 器 支持 ， 但 在 未 来 ， 你 将 可 以 在 
渐变 元 素 上 设置 变换 样式 ， 其 效果 会 与 gradientTransform 属性 相同 。 
CSS 变换 的 语法 与 SVG 中 稍微 有 些 不 同 ，CSS 中 长 度 值 和 角度 值 需要 设置 
单位 ， 但 SVG 1.1 中 这 些 值 通常 定义 为 数字 。 新 模块 中 引入 了 新 的 简写 的 
变换 函数 ， 例 如 transtLateY 和 scalex; 还 废 齐 了 三 个 值 的 旋转 函数 (CSS 
中 不 能 使 用 ) ， 取 而 代 之 的 是 一 个 单独 的 transform-origin 属性 ， 它 将 会 影 
响 渐 变 变 换 的 效果 。 
CSS Transforms Module 还 引入 了 三 维 变换 函数 。 但 它们 不 适用 于 洽 染 服务 ， 
并 且 会 导致 整个 变换 列表 失效 。 

















通过 变换 线性 渐变 创建 的 效果 与 操作 渐变 矢量 创建 的 效果 类 似 。 对 于 任意 
给 定 的 图 形 ， 它 们 中 总 有 一 个 更 加 易于 计算 。 














你 可 以 结合 使 用 位 置 属性 和 变换 。 变 换 形状 时 ， 位 置 属性 可 
以 在 变换 坐标 系 中 计算 。 





各 种 形状 和 尺寸 的 渐变 | 83 


变换 一 个 渐变 是 什么 意思 呢 ? 它 的 意思 是 这 娄 服 务 创 建 的 墙纸 在 裁剪 为 要 
填充 的 形状 之 前 进行 了 变换 。 相 比 之 下 ， 当 你 变换 一 个 使 用 渐变 填充 的 形 
状 时 ， 形 状 和 渐变 都 会 被 变换 。 


图 7-8 比较 了 在 变换 和 未 变换 的 形状 中 使 用 变换 和 未 变换 渐变 的 两 种 效果 。 
例 7-5 是 对 应 的 代码 。 


例 7-5 变换 中 的 形状 和 渐变 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xlLink" 
width="400" height="500" viewBox="0,0 400,500"> 
<title xml:Lang="en">Transforming shapes, gradients, or both 
</title> 





<LinearGradient id="stripe" x2="0" y2="100%"> (1) 
<stop offset="0" stop-color="yellow"/> 
<stop offset="0.1" stop-color="gold"/> 
<stop offset="0.5" stop-color="tomato"/> 
<stop offset="0.5" stop-color="blueViolet"/> 
<stop offset="0.9" stop-color="indigo"/> 
<stop offset="1" stop-color="midnightblue"/> 


</lLinearGradient> 

<linearGradient id="stripe-transformed" xlink:href="#stripe" 
gradientTransform="skewY(25)" /> (2) 

<g fill="url(#stripe)" > © 


<rect height="190" width="190" x="5" y="5" /> 
<rect height="190" width="190" x="5" y="5" 
transform="translate(200,0) skewY(25)"/> @ 
</g> 
<g transform="translate(0,200)" 
fill="url(#stripe-transformed)"> 
<rect height="190" width="190" x="5" y="5" /> 
<rect height="190" width="190" x="5" y="5" 
transform="translate(200,0) skewY(25)"/> © 


© 


</g> 
</svg> 


O 基础 渐变 使 用 位 置 属性 来 定义 从 上 到 下 的 方向 : 起 始点 是 默认 的 (0,0)， 
终点 是 〈0,100% ) 。 

@ 第 二 个 渐变 使 用 xlink:href 属性 来 复制 相同 的 颜色 结 点 图 案 ， 
gradientTransform 属性 用 于 把 图 案 进 行 倾斜 变换 。 


© 前 两 个 <rect> 元 素 被 分 为 一 组 来 使 用 相同 的 填充 值 。 它 们 都 会 使 用 未 变 
换 的 渐变 来 填充 。 











N 

















O 第 二 个 正方 形 先 水 平移 到 图 形 的 右上 部 分 ， 然 后 再 倾斜 。 但 它 填 充 所 使 
用 的 渐变 本 身 没 有 倾斜 ， 所 以 颜色 结 点 依然 完全 与 正方 形 的 顶部 和 底部 
边缘 对 齐 。 

O 下 面 一 行 的 正方 形 使 用 了 变换 之 后 的 渐变 ， 左 边 的 正方 形 本 身 没 有 倾斜 ， 
而 只 倾斜 了 渐变 。 


O 最 后 一 个 正方 形 本 身 是 倾斜 的 ， 且 使 用 倾斜 的 渐变 填充 。 所 以 最 终 渐变 
角度 是 混合 之 后 的 效果 。 


























图 7-8: 倾斜 渐变 和 正方 形 ; 未 变换 的 渐变 (E) 和 倾斜 后 的 渐变 (下 ) 
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形状 的 变换 会 维持 渐变 颜色 和 形状 边缘 之 间 的 关系 : 图 7-8 中 同一 行 的 正方 

形 对 应 的 角 都 有 相同 的 颜色 ， 而 不 管 形状 整体 是 否 被 倾斜 。 相 比 之 下 ， 当 

渐变 被 变换 时 ， 它 会 独立 于 形状 变换 ， 改 变 渐变 的 可 见 部 分 。midnightblue 

颜色 几乎 完全 被 切 掉 ， 而 纯 黄 色 则 大 部 分 是 可 见 的 。 

没有 直接 的 方式 可 以 只 变换 形状 而 不 变换 填充 它 的 泻 当 服务。 即使 是 

userSpaceOnUse 渐变 ， 也 会 在 使 用 它 的 形状 的 坐标 系统 变换 中 反映 出 来 。 
如 果 要 在 变换 的 形状 内 使 用 未 变换 的 泻 染 服务 ， 可 以 使 用 裁 
前 路 径 来 使 变换 形状 的 边界 正好 放 在 一 个 更 大 的 、 使 用 泻 染 
服务 填充 的 未 变换 的 长 方形 内 。 





倾斜 显然 是 渐变 变换 来 创建 对 角 渐变 的 一 种 方式 。 旋 转 是 另 一 种 方式 。 例 
7-6 创建 了 彩虹 渐变 并 将 它 间隔 45 度 进行 旋转 ， 之 后 用 生成 的 渐变 分 别 填 
E SVG 边 和 和 角 周 围 的 椭圆 。 最 终结 果 如 图 7-9 所 示 。 


例 7-6 使 用 旋转 变换 渐变 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="400" height="300" viewBox="-200,-150 400,300"> @ 
<title xml: lang="en">Rotated Gradients</title> 
<defs> 
<linearGradient id="rainbow" > 
<stop stop-color="darkViolet" offset="0"/> 
<stop stop-color="blue" offset="0.143"/> (2) 
<stop stop-color="cyan" offset="0.286"/> 
<stop stop-color="limeGreen" offset="0.429"/> 
<stop stop-color="yellow" offset="0.572"/> 
<stop stop-color="orange" offset="0.715"/> 
<stop stop-color="red" offset="0.857"/> 
<stop stop-color="maroon" offset="1"/> 
</linearGradient> 
<linearGradient id="rainbow45" xlink:href="#rainbow" 
gradientTransform="rotate(45)"/> © 
<linearGradient id="rainbow90" xlink:href="#rainbow" 
gradientTransform="rotate(90)"/> 
<linearGradient id="rainbow135" xlink:href="#rainbow" 
gradientTransform="rotate(135)"/> 
<linearGradient id="rainbow180" xlink:href="#rainbow" 
gradientTransform="rotate(180)"/> 
<linearGradient id="rainbow225" xlink:href="#rainbow" 
gradientTransform="rotate(225)"/> 
<linearGradient id="rainbow270" xlink:href="#rainbow" 
gradientTransform="rotate(270)"/> 


























<linearGradient id="rainbow315" xlink:href="#rainbow" 
gradientTransform="rotate(315)"/> 
</defs> 


<ellipse rx="60" ry="40" cx="130" cy="0" 
fill="url(#rainbow)"/> (4) 

<ellipse rx="60" ry="40" cx="130" cy="100" 
fill="url(#rainbow45)"/> 

<ellipse rx="60" ry="40" cx="0" cy="100" 
fill="url(#rainbow90)"/> 

<ellipse rx="60" ry="40" cx="-130" cy="100" 
fill="url(#rainbow135)"/> 

<ellipse rx="60" ry="40" cx="-130" cy="0" 
fill="url(#rainbow180)"/> 

<ellipse rx="60" ry="40" cx="-130" cy="-100" 
fill="url(#rainbow225)"/> 

<ellipse rx="60" ry="40" cx="0" cy="-100" 
fill="url(#rainbow270)"/> 

<ellipse rx="60" ry="40" cx="130" cy="-100" 
fill="url(#rainbow315)"/> 

</svg> 


7-9: 用 旋转 渐变 填充 的 椭圆 
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O SVG 使 用 以 原点 为 中 心 的 坐标 系 。 
O 彩虹 渐变 拥有 八 个 结 点 ， 所 以 偏 移 都 是 1/7 (0.143) 的 倍数 。 


© 使 用 xlink:href 来 引用 源 渐变 来 生成 几乎 一 样 的 渐变 ， 然 后 给 它 添加 新 
的 属性 : 本 例 中 是 gradientTransform。 


O 源 渐变 使 用 默认 方向 从 左 到 右 排 列 ， 使 用 该 渐变 填充 的 椭圆 的 位 置 在 
SVG 的 右 侧 边 上 。 剩 余 的 椭圆 围绕 SVG 按照 顺 时 针 的 方向 放置 ， 并 与 
沿 顺 时 针 方向 依次 增加 的 渐变 变换 角度 相对 应 。 


等 等 ， 为 什么 一 些 形状 是 使 用 纯 紫 罗兰 色 填 充 而 不 是 使 用 渐变 填充 的 ?这 
是 因为 椭圆 是 围绕 SVG 坐标 系 的 中 心 排列 的 ， 而 渐变 是 围绕 它们 各 自 的 对 
象 边界 盒 坐标 的 中 心 来 旋转 的 。 正 如 所 有 的 SVG 坐标 系 一 样 ， 它 的 默认 原 
点 是 左上 角 ,， 但 是 渐变 没有 viewBox 属性 来 改变 它 。 


渐变 矢量 (初始 状态 下 ， 沿 着 每 个 形状 的 边界 盒 的 顶部 从 左 到 右 ) 是 围绕 
每 个 盒子 的 原点 (左上 角 ) 来 旋转 的 。 把 渐变 矢量 旋转 90 度 (如 底部 中 间 
的 椭圆 所 示 ) 将 会 使 渐变 从 上 到 下 改变 。 然 而 ， 再 进一步 旋转 的 话 ， 渐 变 
矢量 将 会 指向 形状 边界 盒 的 外 部 。 形 状 的 大 部 分 或 全 部 在 渐变 起 始 之 前 的 
区 域 中 ， 所 以 会 使 用 第 一 个 渐变 结 点 中 定义 的 颜色 (上述 中 的 darkviolet) 


HBR. 


为 了 有 效 地 在 对 象 边 界 盒 中 使 用 线性 渐变 的 旋转 变换 ， 你 需要 一 些 额 外 的 
操作 。 有 以 下 可 选 方式 。 

把 gradientTransform 属性 的 值 翻译 为 位 置 属性 来 在 形状 内 重新 定位 渐变 。 
使 用 三 个 值 的 rotate(a, 0.5, 0.5) 国 数 来 使 其 围绕 坐标 系 的 中 心 点 旋转 
(如 果 使 用 Css 规则 ， 也 可 以 使 用 transform-origin 属性 ) 。 
改变 矢量 的 位 置 属 性 ， 这 样 旋转 后 它 就 可 以 沿 着 原点 正确 的 一 侧 。 

还 有 更 复杂 的 问题 ， 尽 管 你 已 经 变换 了 渐变 的 方向 ， 但 是 旋转 并 不 能 改变 
它 的 长 度 ， 结 点 的 偏 移 值 依 然 是 相对 于 新 变 矢 量 水 平 长 度 来 计算 的 。 由 于 
对 象 边 界 盒 坐 标的 扭曲 变形 ， 水 平 渐变 的 默认 长 度 (1 水 平 单位 ) 在 旋转 
90 度 之 后 ， 依 然 会 填充 垂直 的 盒子 (1 个 垂直 单位 )。 然 而 ， 它 将 无 法 匹配 
旋转 45 度 之 后 的 对 角 长 度 ( 拉 伸 为 1.141 个 单位 )， 所 以 50% 的 偏 移 将 不 
能 正好 连接 盒子 的 另外 两 个 角 。 

换 名 话说， 渐变 旋转 的 时 候 会 拉 伸 或 收缩 ， 但 可 能 不 是 按照 你 预期 的 方式 。 
如 果 你 在 渐变 上 使 用 userSpaceOnuUse 单位 ， 它 将 会 围绕 整个 SVG 坐标 系 的 
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原点 〈 本 例 中 ， 图 片 的 中 心 点 ) 旋转 。 图 7-10 显示 了 这 种 效果 。 相 对 于 例 
7-6， 代 码 中 唯一 的 修改 是 主要 渐变 元 素 的 属性 : 
<linearGradient id="rainbow" gradientUnits="userSpaceOnUse" 
x1="20%" x2="50%"> 





x1 和 x2 的 值 必须 改变 ， 因 为 现在 百分比 将 会 根据 SVG 的 宽度 而 不 是 形状 
的 宽度 来 计算 。 这 些 新 的 属性 只 需要 设置 一 次 ， 它 们 会 自动 被 复制 到 所 有 
引用 它 的 元 素 上 。 

如 果 你 仔细 看 ， 图 7-9 和 图 7-10 还 有 另外 一 个 不 同 之 处 。 为 了 看 得 更 清楚 
一 些 ， 图 7-11 取出 每 个 图 形 中 右 下 角 的 椭圆 (使 用 rotate(45) 渐变 变换 的 
椭圆 ) 。 左 侧 的 椭圆 使 用 对 象 边 界 盒 渐变 ， 而 右 侧 的 椭圆 使 用 的 是 用 户 空间 
坐标 。 它 们 的 角度 不 完全 相同 。 使 用 对 象 边界 盒 的 渐变 ，45 度 看 起 来 更 像 
旋转 了 60 BE. 


图 7-10: 使 用 在 用 户 空间 旋转 的 渐变 填充 椭圆 



























































这 是 因为 变换 角度 是 在 对 象 边界 盒 创建 的 拉 伸 坐标 系 内 计算 的 。 如 果 长 方 
形 边界 大 致 上 是 一 个 正方 形 ， 最 终 的 角度 将 和 你 定义 的 角度 一 样 。 如 有 果 不 
是 下 方形， 就 像 这 些 椭圆 一 样 ， 角 度 将 会 相应 地 压缩 或 拉 伸 。 对 象 边界 盒 
的 45 度 通常 正好 是 盒子 的 对 角 线 ， 但 是 在 其 他 坐标 系 中 ， 将 不 一 定 匹 配 相 
同 的 角度 。 
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图 7-11: 比较 渐变 在 对 象 边界 盒 空间 (£) 和 用 户 坐 标 空间 (6) 内 旋转 的 结果 


CSS 与 SVG 
使 用 角度 定位 CSS 渐变 


CSS 渐变 同样 可 以 使 用 旋转 角度 来 定位 ， 但 是 结果 与 SVG 中 有 所 不 同 。 


你 可 以 使 用 带 单位 的 角度 作为 linear-gradient 有 函数 的 第 一 个 参数 ， 来 代替 
方向 关键 词 。 由 于 默认 方向 是 从 上 到 下 ， 角 度 是 相对 于 朝 下 的 垂直 夭 量 来 
计算 的 ， 为 了 创建 SVG 默认 的 指向 右 侧 的 渐变 ， 必 须 把 它 设置 为 -90 度 。 


例 7-7 改编 自 例 7-4， 它 比较 的 不 是 CSS 渐变 和 SVG 渐变 ， 而 是 两 种 CSS 
渐变 。<body> 上 的 渐变 使 用 的 是 to 角 的 语法 来 倾 针 ， 而 内 部 的 <div> 元 素 
上 的 渐变 使 用 角度 来 倾斜 。 最 终 的 网 页 如 图 7-12 所 示 。 


例 7-7 使 用 角度 而 非 关 键 词 来 控制 CSS 渐变 
<!DOCTYPE htmL> 
<html Lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Angling CSS gradients versus using corners</title> 


<style type='text/css'> 
html, body { 

height: 100%; 

margin: 0; padding: 0; 


body { 
background: linear-gradient(to bottom left, 
white, red 50%, blue 50%, white); 
} 
div { 
background: linear -gradient(-45deg, 





white, red 50%, blue 50%, white); 
position: absolute; 
width: 50%; height: 50%; 
left: 25%; top: 25%; 


</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 





P 


= 














图 7-12; 在 角 到 角 的 CSS 渐变 上 放置 一 个 固定 角度 的 渐变 


使 用 角度 定义 的 渐变 会 精确 地 使 用 定义 的 角度 绘制 ， 即 使 这 意味 着 50% 的 
结 点 不 再 连接 元 素 的 左下 角 和 右上 角 。 渐 变 矢量 的 长 度 和 位 置 会 自动 调整 ， 
所 以 渐变 依然 从 左上 角 开 始 到 右 下 角 结 束 。 再 次 说 明 ， 创 建 不 在 角 上 起 始 
和 终止 的 CSS 渐变 的 唯一 方式 是 调整 个 别 颜色 结 点 的 偏 移 值 。 
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在 第 7 章 中 操作 渐变 矢量 和 渐变 变换 时 ， 我 们 曾 数 次 指出 超出 渐变 矢量 的 
区 域 会 被 填充 为 纯色 ， 也 提 到 这 只 是 默认 行为 。 

本 章 会 探讨 替代 的 方案 一 重复 渐变 ， 它 变换 尽 可 能 多 的 次 数 来 填充 形状 。 
同样 ，SVG 和 CSS 都 可 以 实现 这 种 效果 ， 我 们 也 会 对 两 者 进行 对 比 。 

基于 现在 已 经 介绍 的 线性 渐变 的 所 有 属性 ， 该 章 最 后 将 介绍 一 些 关 于 SVG 
渐变 常见 的 一 个 用 途 (但 不 幸 的 是 ， 也 有 很 多 问题 ) 的 例子 : 在 HTML 页 
面 中 设 定 重 复 使 用 的 SVG 图 标的 样式 。 如 有 果 想 要 达到 预期 结果 ， 你 需要 避 
免 Web 浏览 器 中 的 一 些 bug。 


8.1 如 何 扩展 渐变 


超出 渐变 矢量 终点 部 分 的 新 变 外 观 可 以 通过 <linearGradient> 元 素 上 
spreadMethod 属性 的 值 来 设置 。 它 控制 着 渐变 如 何 无 限 扩展 。 


该 属性 的 默认 值 是 pad。 矢 量 之 前 的 部 分 都 使 用 第 一 个 stop-cotor 的 值 来 
填补 ， 而 矢量 终点 之 后 的 部 分 都 使 用 最 后 一 个 stop-color 的 值 来 填补 。 我 
们 之 前 看 到 的 例子 使 用 的 都 是 默认 的 填补 行为 ， 例 8-1 中 明确 设置 了 该 值 ， 
x1 和 x2 属性 把 渐变 限制 在 对 象 边 界 盒 中 间 的 10%， 但 是 形状 剩 下 的 部 分 将 
会 被 蓝 色 和 粉红 色 填 补 。 渐 变 结果 如 图 8-1 所 示 。 


















































92 

















8-1: PAER 
例 8-1 使 用 填补 渐变 来 填充 形状 


<svg xmLns="http://www.w3.org/2000/svg" 
width="4in" height="1in"> 
<title xml: lang="en">Padded Gradient</title> 
<LinearGradient id="divider" spreadMethod="pad" 
x1="45%" x2="55%" > o 
<stop stop-color="lightSteelBlue" offset="0%"/> 
<stop stop-color="darkRed" offset="50%"/> 


<stop stop-color="salmon" offset="100%"/> (2) 
</linearGradient> 
<rect width="100%" height="100%" fill="url(#divider)" /> 


</svg> 
@ 你 不 需要 设 定 spreadMethod 的 值 ， 因 为 pad 是 默认 值 ， 这 里 是 为 了 突出 它 。 
O 注意 结 点 的 偏 移 值 是 渐变 矢量 长 度 的 百分比 ， 而 不 是 对 象 边 界 盒 或 用 户 
空间 的 百分比 。 
spreadMethod 属性 的 其 他 可 选 值 有 repeat 和 reflect。 这 两 个 值 都 会 导致 
渐变 重复 尽 可 能 多 的 次 数 来 填充 形状 。 
WebKit (Safari 浏览 器 和 旧版 本 的 Chrome) 不 支持 spreadMethod 
属性 的 repeat 和 reflect 值 。Firefox 暂时 在 改变 底层 代码 时 
不 支持 重复 和 映射 的 渐变 ， 它 们 在 2014 年 的 32 版 本 中 再 次 
引入 。 当 不 支持 时 ， 所 有 的 渐变 都 按照 填补 闫 色 来 泻 染 。 
如 果 重 复 效果 对 于 你 的 图 形 来 说 必 不 可 少 ， 你 有 两 种 解决 办 法 : 
。 尽 可 能 多 次 地 手动 重复 渐变 结 点 (并 调整 渐变 矢量 的 尺寸 ) 
来 填充 你 的 形状 ; 
。 使 用 <pattern> 元 素 (第 10 章 中 介绍 ) 来 创建 重复 渐变 纹理 。 








8.2 ”无穷 渐变 映射 


reflect 方法 在 每 个 重复 周期 内 ， 都 会 反 转 结 点 的 顺序 。 这 会 在 起 始点 和 终 
点 之 间 有 一 个 平 请 的 过 渡 ， 在 定义 的 颜色 交替 时 不 会 有 任何 不 连续 的 感觉 。 
颜色 在 波峰 和 波 谷 之 间 交 替 。 

在 例 8-1 的 基础 上 将 spreadMethod 属性 的 值 修改 为 reflect， 结 果 如 图 8-2 
所 示 。 





























B 8-2: 在 两 侧 映射 狭 窜 的 渐变 

尽管 中 间 的 渐变 与 图 8-1 中 完全 一 样 ， 但 当 渐 变 区 域 重 复 和 映射 时 ， 在 视 
觉 上 的 效果 会 有 不 同 ， 看 起 来 就 像 一 个 颜色 交替 的 金属 管 。 需 要 注意 的 是 ， 
重复 发 生 在 你 指定 的 渐变 向 量 之 前 和 之 后 两 个 方向 上 。 

映射 渐变 的 效果 很 大 程度 上 会 受到 渐变 矢量 长 度 和 色彩 对 比 度 级 别 的 影响 。 
图 8-2 创建 了 一 个 更 精妙 、 波 纹 状 的 映射 渐变 ， 如 图 8-3 所 示 。 





























图 8-3; 映射 三 种 颜色 的 渐变 
例 8-2 使 用 映射 渐变 来 创建 一 个 平滑 重复 的 图 案 


<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="1in"> 
<title xml:lang="en">Reflecting Gradient</title> 
<linearGradient id="waves" spreadMethod="reflect" 
x2="10%" y2="10%"> 
<stop stop-color="darkGreen" offset="0"/> 
<stop stop-color="mediumSeaGreen" offset="50%"/> 





<stop stop-color="skyBlue" offset="100%" /> 
</linearGradient> 
<rect width="100%" height="100%" fill="url(#waves)" /> 
</svg> 


渐变 矢量 沿 着 对 角 线 从 左上 角 (默认 的 x1 F yE) 指向 10% 位 置 的 点 。 
这 是 单独 一 个 渐变 在 单个 周期 的 距离 。 因 此 所 得 到 的 形状 有 5 对 ( 共 10 次 
循环 ) 交替 的 渐变 ， 沿 着 对 角 线 从 绿 到 蓝 交 替 。 


8.3” 非 映射 重复 


映射 浙 变 创建 了 平 谓 地 从 一 种 颜色 变换 为 另 一 种 颜色 然后 再 变换 回来 的 效 
果 。 相 比 之 下 ， 当 spreadMethod 的 值 为 repeat 时 ， 渐 变 结 点 会 从 始 至 终 以 相 
同 的 顺序 重复 。 除 非 开 始 和 结束 的 颜色 相同 ， 否 则 会 导致 渐变 看 起 来 不 连续 。 


我 们 依然 采用 例 8-1 中 的 代码 ， 并 使 用 spreadMethod="repeat"， 能 够 清晰 
地 看 到 它们 之 间 的 差异 。 结 果 如 图 8-4 所 示 。 

















B 8-4: 在 两 侧重 复 的 狭窄 渐 变 
一 个 明显 的 不 同 是 现在 每 个 渐变 周期 的 边缘 都 创建 了 锐利 的 线条 ， 就 好 像 
你 看 到 的 是 手风琴 的 福子， 每 侧 的 光线 都 不 同 。 


重复 渐变 在 创建 条 纹 效果 时 非常 有 用 。 例 8-3 利用 这 一 优点 创建 了 一 个 条 纹 
的 背景 效果 ， 如 图 8-5 所 示 。 

















8-5: 使 用 重复 渐变 创建 的 条 纹 背 景 





Gil 8-3 使 用 重复 渐变 创建 一 个 条 纹 图 案 
<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="1in"> 
<title xml: lang="en">Repeating Gradient</title> 
<linearGradient id="wallpaper" spreadMethod="repeat" 
gradientUnits="userSpaceOnUse" 
x1="5px" x2="45px"> 
<stop stop-color="indigo" offset="50%" /> 
<stop stop-color="deepSkyBlue" offset="50%" /> 
<stop stop-color="lLightSkyBlue" offset="90%" /> © 
</linearGradient> 
<rect width="100%" height="100%" fill="url(#wallpaper)" /> 
</svg> 


O 渐变 使 用 用 户 空间 单位 来 确定 尺寸 ， 所 以 每 个 渐变 周期 的 宽度 可 以 使 用 
绝对 单位 来 定义 ， 而 不 是 使 用 引用 形状 的 百分比 定义 。 渐 变 矢量 是 水 平 
的 (yl 和 y2 都 使 用 默认 的 0)， 每 个 周期 的 宽度 是 40px， 也 就 是 与 xl 
和 x2 之 间 的 差 值 。 


O 第 一 个 结 点 在 循环 的 中 间 位 置 (50% 偏 移 )， 每 个 循环 周期 起 始点 和 偏 
移 之 间 的 空白 会 使 用 第 一 个 结 点 的 颜色 填补 。 换 名 话说 ， 每 一 个 重复 周 
期 的 前 半 部 分 都 是 使 用 indigo 填充 的 纯色 条 纹 。 

© E 50% 偏 移 的 位 置 颜色 急剧 变 为 蓝 色 后 ， 一 直到 90% 偏 移 的 位 置 浅 蓝 
色 有 一 个 细微 的 浙 变 ， 循 环 周期 的 剩余 部 分 将 会 使 用 浅 蓝 色 填 充 。 

例 8-3 还 演示 了 我 们 在 第 7 章 中 提 到 的 一 些 内 容 : 不 设置 渐变 矢量 的 起 始 或 

终止 位 置 的 结 点 与 改变 矢量 的 长 度 是 不 同 的 (在 重复 或 映射 渐变 中 ) 。 颜 色 

是 在 <stop> 和 矢量 终点 之 间 填 补 的， 而 重复 是 应 用 在 矢量 本 身上 的 。 


0 
© 








CSS 与 SVG 
重复 CSS 渐变 
repeating-linear-gradient() 函数 用 于 创建 CSS 中 的 重复 线性 渐变 。 参 数 
与 常规 的 线性 渐变 是 一 样 的 : 一 个 方向 参数 (关键 词 或 角度 ) ， 接 着 是 颜色 
结 点 列表 。 


重复 CSS 渐变 在 许多 浏览 器 中 的 支持 都 晚 于 常规 的 渐变 。 但 
是 现在 所 有 主流 浏览 器 的 最 新 版 本 ， 包 括 Safari ( 不 支持 重 
复 SVG 渐变 ) 都 已 经 支持 。 


重复 部 分 完全 匹配 第 一 个 和 最 后 一 个 结 点 之 间 的 距离 。 为 了 看 到 重复 效果 ， 





你 需要 明确 设置 至 少 一 个 结 点 的 偏 移 ， 否 则 ， 单 个 周期 将 会 填 满 整个 CSS 
At ky & 
要 想 在 重复 之 间 创 建 纯色 块 ， 你 需要 提供 两 个 颜色 相同 的 结 点 。 例 如 ， 要 
创建 垂直 的 蓝 色 和 衣 蓝 色 条 纹 背 景 ， 代 码 如 下 : 
background: repeating-Linear-gradient(to right， 
indigo 5px, indigo 25px, 


deepSkyBlue 25px, 
LightSkyBlue 41px, LightSkyBlue 45px); 


重复 块 依然 是 40px 宽 ， 即 第 一 个 和 最 后 一 个 结 点 的 差 。 中 间 的 结 点 使 用 的 
也 是 px 值 。 如 果 你 使 用 的 是 百分比 值 ， 它 们 会 相对 于 CSS FHS RH 
变 重复 距离 来 计算 ， 完 全 不 计 缩 放 的 话 ，50% 的 偏 移 将 会 远大 于 45px 的 最 
终 偏 移 。 


CSS 中 没有 实现 映射 渐变 的 简单 方式 。 要 想 创 建 映 射 图 案 ， 你 需要 手动 复 
制 stop 来 创建 一 个 完整 的 重复 块 ， 代 码 如 下 : 
background: repeating-linear-gradient(to bottom right, 
darkGreen, mediumSeaGreen 5%, 


skyBlue 10%, 
mediumSeaGreen 15%, darkGreen 20%); 


本 例 中 ， 第 一 个 结 点 的 偏 移 是 默认 的 0， 因 此 重复 图 案 是 对 角 线 长 度 的 
20%， 与 例 8-2 中 的 往复 循环 一 样 。 


对 于 CSS 背景 中 的 水 平和 重 直 渐变 ， 你 还 可 以 使 用 background-size 来 定 
义 一 个 大 于 一 次 重复 的 背景 图 片 ， 并 使 用 background-repeat 属性 平 铺 填 充 
元 素 ， 以 此 来 创建 重复 渐变 的 效果 。 


相 比 于 repeating-Linear-graditent， 平 铺 的 方式 有 两 个 便利 之 处 。 你 可 以 
独立 于 重复 区 域 的 尺寸 ， 在 渐变 方向 上 使 用 百分比 作为 距离 ， 并 且 对 于 重 
复 区 域 起 始 和 结束 位 置 的 纯色 ， 你 不 需要 使 用 额外 的 结 点 。 例 如 ， 你 可 以 
使 用 如 下 简写 的 样式 规则 来 创建 背景 效果 : 
background: linear-gradient(to right, 
indigo 50%, 
deepSkyBlue 50%, 


LightSkyBlue 90%) 
5px 0/40px 100% repeat-x; 


如 果 你 想 要 改变 条 纹 的 宽度 或 偏 移 ， 现 在 只 需要 调整 一 个 值 (40px 100% 的 


background-size 的 值 用 于 设置 总 宽度 ，5px 0 49 background-position 的 值 
用 于 设置 偏 移 ) ， 而 不 用 去 修改 每 个 结 点 。 





基于 一 点 点 三 角形 学 ， 你 还 可 以 通过 这 种 方式 重复 对 角 渐 变 : 仔细 计算 出 
正确 的 background-size 来 创建 重复 的 磁 贴 (tile), 但 是 舍 入 的 效果 可 能 会 
在 磁 贴 之 间 创 建 可 见 的 边 。 


8.4 在 HTML 中 使 用 〈 复 用 ) 渐变 


前 面 介绍 的 关于 渐变 的 例子 都 是 在 SVG 文件 中 使 用 渐变 来 填充 简单 的 形状 ， 
而 且 大 部 分 是 简单 地 直接 填充 占据 整个 图 形 的 长 方形 。 然 而 ， 随 着 CSS 渐 
变 的 广泛 支持 ， 使 用 简单 的 SVG 渐变 背景 的 情况 不 断 减 少 。 但 同时 ， 随 着 
浏览 器 支持 程度 的 提高 ， 其 他 SVG 图 形 的 使 用 场景 在 不 断 增多 。 这 包括 内 
St SVG 代码 ，HTML 文件 中 通过 主 文档 的 样式 表 添加 样式 的 标记 。 


渐变 可 以 用 在 图 标 、 图 表 或 其 他 HTML 页 面 内 的 SVG 代码 中 。 大 多 数 情况 
下 ， 它 的 运行 结果 与 在 单独 的 SVG 文档 中 一 样 ， 但 也 有 一 些 例外 ， 大 都 可 
以 归 因 于 浏览 器 的 bug。 


对 于 单个 比较 大 的 SVG 文件 例如， 数据 可 视 化 )， 所 有 的 SVG 代码 ， 包 
括 渐变 的 定义 ， 通 常 都 包含 在 一 起 。 


相 比 之 下 ， 对 于 SVG 图 标 系 统 ， 图 标 通 常 都 被 定义 一 次 ， 然 后 通过 <user> 
元 素 重 复 使 用 。 这 样 可 以 保持 你 的 页 面 结构 ， 且 使 得 主要 的 内 敛 标签 清晰 简 
洁 。 最 简单 情况 下 ， 每 个 图 标 实例 可 以 通过 仅 比 颈 入 图 片 稍 多 的 标签 来 表示 : 


<svg Class="icon"><use xlink:href="#star" /></svg> 


在 同一 文件 的 其 他 地 方 ， 添加 id="star" 的 <symbol> 标签 将 会 定义 实际 的 
形状 ， 它 将 会 被 缩放 到 适合 添加 icon 类 的 <svg> 元 素 的 大 小 。 


根据 不 同 的 使 用 情况 ， 你 可 能 需要 引入 一 个 标题 提示 、 可 访问 名 称 以 及 备 
用 的 文本 : 
<svg class="icon" role="img" aria-labelledby="icon-0001"> 
<use Xlink:href="#star"> 
<title>Tooltip</title> 
<desc id="icon-0001">Alternative Text</desc> 
</use> 
</svg> 
现代 浏览 器 中 <title> 中 的 内 容 将 作为 工具 提示 。<desc> 中 的 内 容 用 于 可 
访问 名 称 (因为 有 aria-labelledby 属性 ) 并 且 可 以 在 旧 的 不 支持 SVG 的 
浏览 器 中 显示 。 


















































每 个 <symbol> 中 的 原始 图 形 通 常 只 分 配 最 少 的 样式 规则 ， 这 样 它们 就 可 以 
继承 <use> 实例 上 设置 的 样式 ， 包 括 一 些 交 互 样式 ， 比 如 hover 和 focus 效 
果 。 这 些 样式 还 包括 引用 产 变 元 素 作为 填充 或 描 边 。 然 而 ， 正 如 之 前 在 第 
章 中 说 的 那样 ，URL 解析 规则 以 及 外 部 SVG 资源 的 低 支 持 也 避免 了 这 些 样 
式 在 外 部 样式 表 中 分 配 。 


在 除 Firefox 外 的 所 有 浏览 器 中 ， 演 染 服 务 与 图 形 必须 在 同一 
个 文档 中 ， 所 以 样式 规则 也 必须 定义 在 同一 文档 中 ， 而 不 是 



































在 外 部 样式 表 中 。 





理论 上 ， 外 部 样式 可 以 通过 urL() 引用 链接 到 主 文档 中 。 但 在 实践 中 ， 
与 外 部 样式 表 是 用 于 多 个 文档 中 重复 使 用 的 主要 用 途 相 矛 盾 。 


由 于 它们 不 能 集中 在 外 部 文件 中 ， 渐 变 本 身 通常 通过 它们 自己 <svg> 元 素 
内 的 不 在 屏幕 上 绘制 任何 东西 的 图 标定 义 来 收集 。( 它 们 必须 定义 在 <svg> 
元 素 内 才能 被 正确 解析 为 SVG 内 容 。) 


正如 我 们 介绍 用 户 空间 渐变 时 提 到 的 ， 除 Firefox 外 的 所 有 浏 
BA: 览 器 器 都 基于 渐变 元 素 的 父 级 <SVg> 来 缩放 userSpaceOnUse 渐 




















变 ， 而 不 是 被 绘制 的 形状 的 坐标 系 。 因 此 用 户 空间 渐变 在 使 
用 一 个 单独 的 SVG 定义 时 会 失效 。 
































为 了 获得 最 佳 的 浏览 器 支持 且 易 于 维护 标记 ，SVG 通常 放置 在 HTML 中 
<body> 的 顶部 。 


日 的 WebKit 浏览 器 不 能 正确 定位 symbol 和 其 他 一 些 文档 中 
定义 在 使 用 ia eee A 


理想 情况 下 ， 你 可 能 会 把 SVG 定义 与 其 他 不 显示 的 内 容 一 起 放置 在 HTML 
的 <head> 中 。 至 少 ， 你 也 可 以 使 用 display:none 来 保证 额外 的 SVG 不 会 
影响 你 的 网 页 。 但 这 两 个 方法 在 实践 中 都 不 可 用 。 


所 有 被 测试 浏览 器 在 渐变 的 祖先 元 素 的 display 设置 为 none 
时 都 不 会 演 染 渐变 (或 图 案 )， 尽 管 SVG 规范 中 明确 声明 









































display 不 应 该 有 任何 效果 。 这 是 SVG 在 跨 浏览 器 一 致 性 上 
最 令 人 诅 丧 的 一 个 例子 





所 以 ， 你 需要 使 用 替代 的 CSS 来 保证 SVG 定义 不 会 影响 你 的 网 页 ， 并 使 
用 ARIA 属性 来 确保 辅助 的 技术 不 会 处 理 它 。 此 外 ， 为 了 避免 CSS 加 载 时 
间 过 长 ， 你 可 能 还 需要 使 用 SVG 属性 来 摧毁 定义 元 素 的 大 小 。 最 后 ， 由 于 
IE 实现 了 未 敲定 的 SVG 1.2 中 对 于 键盘 控制 SVG 的 提议 ， 你 还 需要 使 用 
focusable 属性 来 明确 告诉 它 SVG 不 应 该 成 为 键盘 的 焦点 。 
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图 8-6: HTML 页 面 中 使 用 渐变 来 填充 和 描 边 的 图 标 














在 正中 ，HTML 中 所 有 的 <svg> 元 素 默认 都 是 键盘 聚焦 的 ， 
只 能 通过 focusable="false" 来 从 tab 的 索引 中 删除 。 在 最 
新 版 本 的 WebKit/Blink 浏览 器 中 ，<svg> 元 素 默 认 是 键盘 不 
能 聚焦 的 ， 但 是 可 以 通过 给 tabindex 设置 一 个 正 的 值 来 使 它 
可 以 获得 焦点 。Firefox 没有 实现 任何 一 种 焦点 控制 的 方式 。 


























有 了 这 么 多 警示 ， 那 么 HTML 文件 中 给 SVG 图 标 使 用 渐变 的 结果 是 什么 样 
的 呢 ? 例 8-4 给 出 了 在 导航 菜单 中 使 用 SVG 图 标的 网 页 的 核心 标记 和 样式 。 
不 同 颜 色 的 渐变 用 于 区 分 导航 选项 中 的 当前 站 点 ， 以 及 指示 出 基 停 和 获得 























焦点 时 的 状态 。 图 8-6 显示 了 在 第 一 个 导航 链接 处 于 焦点 状态 的 样子 。 
例 8-4 HTML 页 面 内 使 用 渐变 的 SVG 图 标 
HTML 标记 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Re-using Symbols with Gradients</title> 
<style type='text/css'> 
/* styles must be included in the same document */ 
</style> 
</head> 
<body> 
<svg Class="defs-only" aria-hidden="true" focusable="false" 
width="0" height="0"> (1) 
<linearGradient id="silver-shine" spreadMethod="repeat" 
gradientTransform="rotate(40) scale(0.8)" > 
<stop offset="0" stop-color="gray" /> 
<stop offset="0.35" stop-color="silver" /> 
<stop offset="1" stop-color="gray" /> 
</linearGradient> 
<linearGradient id="gold-shine" 
xlink:href="#silver-shine" > (2) 
<stop offset="0" stop-color="gold" /> 
<stop offset="0.35" stop-color="lightYellow" /> 
<stop offset="1" stop-color="gold" /> 
</linearGradient> 
<symbol id="home" viewBox="0 0 200 200"> © 
<path d="M30,180 V80 H10 L100,10 190,80 H170 V180 
H90 V100 H60 V180 H30 Z 
M110,100 H150 V140 H110 Z" 
fill-rule="evenodd" /> 
</symbol> 
<symbol id="star" viewBox="10 10 170 150"> 
<path d="M100,10 L150,140 20,50 180,50 50,140 Z" /> 
</symbol> 
<symbol id="magnify" viewBox="0 © 200 200"> 
<path d="M10,170 L70,110 A60,60 © 1,1 90,130 L30,190Z 
M85,104 A44,44 0 1,1 96,116 Z" 
fill-rule="evenodd" /> 
<path d="M85,104 A44,44 0 1,1 96,116 Z" fill-opacity="0.7" /> 
</symbol> 
</svg> 
<a Class="skip-nav" href="#main">Skip to Main Content</a> 
<header> 
<hi>Gradients Gone Wild</hi> 
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<nav> 
<ul> 
<li><a href="/">HOME 
<svg class="nav-icon" role="presentation"> 
<use xlink:href="#home" /> @ 
</svg> 
</a> 
</li> 
<li><a href="/favorites">Favorites 
<svg class="nav-icon" role="presentation"> 
<use Xlink:href="#star" /> 


</svg> 
</a> 
</li> 
<li><a title="(You are here)">Search © 
<svg class="nav-icon" role="presentation"> 
<use xlink:href="#magnify" /> 
</svg> 
</a> 
</li> 
</ul> 
</nav> 
</header> 


<main id="main"> 
<hi>Search the Site</hi> 
<form> 
<input type="search" name="q" 
aria-label="Enter Search Terms"/> 
<button type="submit" aria-label="Search"> 
<svg> 
<use xlink:href="#magnify" /> (6) 
GO 
</svg> 
</button> 
</form> 
</main> 
</body> 
</html> 


O 初始 的 <svg> 用 于 包含 复 用 内 容 的 定义 。 除 了 会 触发 CSS 隐藏 的 defs- 


only 类 外 ， 还 添加 了 aria-hidden="true" 属性 ， 并 设置 标记 的 宽 和 高 都 
2710. focusable="false" 使 下 浏览 器 不 能 通过 键盘 使 它 获得 焦点 。 

O 两 个 渐变 几何 上 完全 一 样 ，spreadMethod 和 gradientTransform 属性 在 
xLink:href 引用 的 时 候 将 会 复制 到 另 一 个 上 。 但 是 它们 的 颜色 不 同 ， 第 
二 个 渐变 中 <stop> 元 素 会 完全 替换 第 一 个 中 对 应 的 结 点 。 
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© =% <symbol> 元 素 用 于 定义 图 标 ， 每 个 都 有 viewBox 属性 ， 所 以 它们 将 
会 被 缩放 到 适合 背景 的 大 小 。 


@ 在 主要 的 网 页 标记 中 ， 


每 个 导航 图 标 都 把 <svg> 艇 套 在 导航 列表 中 的 





<a> 元 素 内 。 单 独 的 <use> 元 素 用 于 引用 symbol, HF <user> 元 素 上 没 
有 位 置 属 性 ， 所 以 复 用 的 symbol 会 被 拉 伸 到 正好 适合 <svg> 的 大 小 。 


O 当前 页 面 表示 的 是 导航 列表 中 没有 href 属性 的 锚 元 素 ， 因 此 它 是 一 个 不 





合法 的 超 链接 。 





O 按钮 图 标的 标记 用 法 与 导航 中 类 似 ， 外 观 上 有 差异 是 因为 SVG 继承 样式 


和 缩放 不 同 。 在 现代 浏 








览 嚣 中， 按钮 中 没有 可 见 的 文字 ，aria-label 属 


性 用 于 给 它 添加 可 访问 名 称 。SVG 中 的 纯 文本 内 容 (GO) 为 旧版 本 浏 
览 器 提供 了 一 种 降级 方案 。 





相关 的 CSS 样式 : 


svg.defs-only { 
display: block; 


position: absolute; 


height: 0; width: 
overflow: hidden; 


svg.nav-icon { 
display: block; 
width: 3em; 
height: 3em; 
Margin: auto; 


0; 


fill: url(#silver-shine); (2) 


a:not(:link) > .nav-icon { 
fill: url(#gold-shine); © 


nav a:link:focus, nav a:link:hover { 
stroke: url(#gold-shine); 
stroke-width: 10px; @ 


} 


input, button { 


display: inline-block; 


height: 2em; 
padding: 0 0.5em; 


input[type="search"] 


width: calc(100% - 


} 
button { 


{ 


5em); 
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display: inline-block; 
width: 3em; 
vertical-align: top; 
color: inherit; 


} 
button svg { 

height: 100%; 

width: 100%; 

fill: currentColor; O 
} 


@ defs-only 类 补充 了 一 些 标记 的 属性 ， 来 确保 仅 用 于 定义 的 <svg> 元 素 无 
论 如 何 都 不 会 影响 布局 或 视觉 效果 。 


O 用 于 导航 图 标的 <svg> 元 素 拥 有 固定 的 宽 和 高 。fiLL 引用 了 SVG 中 预 
先 设置 的 一 个 渐变 ， 它 将 会 被 <use> 元 素 以 及 复 用 的 symbol 继承 。 

© :Link 伪 类 用 于 区 分 <a> 元 素 是 否 有 合法 超 链接 。 如 果 类 没有 匹配 ，SVG 
内 会 重新 使 用 更 明亮 一 些 的 金色 渐变 来 突出 这 是 一 个 活跃 状态 的 页 面 。 

O 对 于 其 他 图 标 ， 当 链接 在 鼠标 光标 悬 停 或 锋 得 焦点 时 将 会 添加 一 个 金色 
的 摘 边 来 表示 交互 的 效果 。 为 了 证 实 这 种 效果 ， 样 式 直 接 设置 在 了 <a> 
元 素 上 。 它 们 同样 会 被 SVG 及 其 内 容 继承 ， 因 为 所 有 SVG 元 素 都 没有 
设置 其 他 的 描 边 样式 。10px 的 描 边 宽度 将 会 应 用 到 最 终 添 加 描 边 的 图 形 
的 坐标 系 中 ， 这 种 情况 下 ， 坐 标 系 是 定义 在 每 个 symbol 内 的 。 

O 因为 样式 在 使 用 时 都 会 被 继承 ， 所 以 当 图 形 应 用 在 同一 个 页 面 的 不 同 背 
景 中 时 是 可 以 改变 的 。 用 在 表单 按钮 内 的 搜索 图 标 将 会 使 用 从 <button> 
上 继承 来 的 文本 的 颜色 来 设置 样式 。 

因为 SVG 标记 的 定义 和 样式 在 网 站 上 的 每 页 内 都 相同 ， 所 以 我 们 通常 在 编 

译 时 会 进行 一 些 服务 端 的 处 理 。 如 果 SVG 代码 比较 多 ， 或 大 多 数 用 户 在 网 

站 上 访问 多 个 网 页 ， 我 们 可 以 在 客户 端 使 用 Ajax 脚本 ， 使 SVG 文件 可 以 

被 缓存 到 浏览 器 中 。 


许多 流行 的 SVG 图 标 系 统 仅 在 <use> 元 素 引 用 外 部 文件 不 被 
支持 时 ， 使 用 Ajax 来 引入 SVGsymbol。WebKit 和 Blink ÙI) 
览 器 目前 支持 外 部 symbol 的 引入 ， 但 是 不 支持 渐变 以 及 其 他 
泻 染 服务 的 引入 。 如 果 有 必要 ， 一 定 要 确保 你 的 脚本 中 有 导 
入 渐变 和 图 案 的 具体 规则 。 



















































































主要 图 形 的 定义 都 包含 在 一 个 单独 的 标记 块 内 ， 这 样 很 容易 给 每 个 图 标 生 
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成 新 的 实例 ， 或 给 这 些 实例 使 用 不 同 的 渐变 。 


例 8-5 使 用 与 例 8-4 相同 的 渐变 ， 以 及 其 中 一 个 完全 相同 的 图 标 ， 依 据 
HTML 代码 中 的 数据 属性 来 动态 生成 星 级 图 。 渐 变 和 symbol 的 定义 是 静态 











brid, (HAE <use> 实例 是 基于 数据 生成 的 。 




















丸 为 现在 每 个 SVG 内 都 包含 了 每 个 图 标的 多 个 副本 ， 所 以 <svg> 上 的 


viewBox 以 及 <use> 元 素 上 的 位 置 属性 都 是 正确 缩放 内 容 所 必需 的 。 此 外 ， 
ARIA 属性 用 于 把 评级 信息 传递 给 辅助 技术 ， 用 只 读 的 范围 滑 块 作为 标记 。 
每 个 等 级 (图 形 中 高 亮 星星 的 个 数 ) 的 视觉 效果 直接 由 aria-valuenow 属性 


























决定 ， 使 用 的 是 基于 nth-of-type 选择 器 的 CSS 规则 。 
的 网 页 。 





图 8-7 显示 的 是 最 终 




















图 8-7: 动态 生成 基于 渐变 效果 的 SVG 星 级 图 标 


例 8-5 使 用 动态 插入 SVG 图 标的 渐变 
HTML 标记 : 





<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
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<title>Reusing Symbols with Gradients</title> 
<style type='text/css'> 
/* styles must be in the same document */ 


</style> 
</head> 
<body> 
<svg Class="defs-only" aria-hidden="true" focusable="false" 
width="0" height="0"> (1) 


<linearGradient id="silver-shine" spreadMethod="repeat" 
gradientTransform="rotate(40) scale(0.8)" > 
<stop offset="0" stop-color="gray" /> 
<stop offset="0.35" stop-color="silver" /> 
<stop offset="1" stop-color="gray" /> 
</linearGradient> 
<LinearGradient id="gold-shine" xlink:href="#silver -shine"> 
<stop offset="0" stop-color="gold" /> 
<stop offset="0.35" stop-color="LightYellow" /> 
<stop offset="1" stop-color="gold" /> 
</linearGradient> 
<symbol id="star" viewBox="0 0 200 200"> 
<path d="M100,10 L150,140 20,50 180,50 50,140 Z" /> 


</symbol> 
</svg> 
<hi>Image Format Awesomeness: </h1i> 
<ol> 
<li id="svg" data-rating="5"> (2) 
<abbr title="Scalable Vector Graphics">SVG</abbr> 
</li> 


<li id="png" data-rating="4"> 
<abbr title="Portable Network Graphics">PNG</abbr> 
</li> 
<li id="gif" data-rating="3"> 
<abbr title="Graphics Interchange Format">GIF</abbr> 
</li> 
<li id="bmp" data-rating="1"> 
<abbr title="Bitmap (Windows )">BMP</abbr> 
</li> 
</ol> 
<script> 
/* script could be loaded as a separate file */ 
</script> 
</body> 
</html> 


O 渐变 的 定义 与 例 8-4 中 相同 ， 但 这 里 我 们 只 需要 一 个 <symbol>。 


O 网 页 主体 的 标记 中 没有 初始 化 任何 SVG 的 内 容 ， 而 列表 的 每 一 项 通过 
data-rating 属性 来 区 分 。 
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CSS 样式 : 


html { 
background-color: #222; 
color: lLightSkyBlue; 

} 

svg.defs-only { 
display: block; 
position: absolute; 
height: 0; width: 0; 


overflow: hidden; (1) 
} 
ol{ 
padding: 0; 
} 
if 
display: block; 
text-align: center; 
list-style: none; 
font-size: larger; 
} 


svg.star-rating { 
display: block; 
Margin: auto; 
width: 10em; 
max-width: 100%; 
height: auto; 


max-height: 2em; (2) 
} 
¿star { 

fill: url(#silver-shine); © 
} 


[aria-valuenow="1"] .star:nth-of-type(-n+1), 
[aria-valuenow="2"] .star:nth-of-type(-n+2), 
[aria-valuenow="3"] .star:nth-of-type(-n+3), 
[aria-valuenow="4"] .star:nth-of-type(-n+4), 
[aria-valuenow="5"] .star:nth-of-type(-n+5) 


{ 
} 


[data-rating]:not(.initialized)::after { 
display: block; 
color: darkgoldenrod; 
text-shadow: black 1px 1px 1px, 
gold 0 0 3px; 
content: attr(data-rating); O 


fill: url(#gold-shine); (4) 
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O 与 例 8-4 中 相同 的 svg.defs-only 样式 用 于 隐藏 包含 所 有 图 形 定义 的 元 素 。 

O 给 要 包含 星 级 的 SVG 元 素 设 定 固定 的 宽 ， 如 果 有 必要 的 话 还 可 能 被 缩 
放 ; max-height 确保 在 不 支持 基于 SVGviewBox 自动 缩放 的 浏览 器 中 也 
有 一 个 合适 的 高 度 。 

© 星星 图 标 默认 使 用 silver-shine 渐变 。 

O 星星 的 正确 数量 变 为 金色 ， 用 一 系列 选择 器 与 aria-valuenow 属性 绑 定 。 
例如 ，:nth-of-type(-n+3) 选择 组 内 前 三 个 <use> 图 标 ， 它 们 是 n WIE 
整数 时 根据 索引 匹配 到 的 图 标 元素 。 

O 如 果 脚 本 没有 执行 ， 即 SVG 星星 没有 生成 ，CSS 伪 元 素 将 会 把 data- 
rating 属性 的 值 输出 到 屏幕 上 。 


JavaScript: 




















(function(){ 
var ns = {svg:"http://www.w3.org/2000/svg", 
xLink: "http: //www.w3.org/1999/xLink"}; 
var maxRating = 5; 
var index = 0; 


var ratings = document.querySelectorAll("[data-rating]"); © 
for (var i=0, n=ratings.length; i<n; i++){ 

var r = ratings[i]; 

//add an `id` value if it doesn't exist 

r.id = r.id || "rating-" + (index++); 


//parse the rating 
var value = parseInt(r.getAttribute("data-rating"),10); 


//create and insert an SVG to represent the rating 

var s = document.createELementNS(ns.svg, "svg"); © 
s.setAttribute("viewBox", "© 0 " + maxRating + " 1"); 
.setAttribute("class", "star-rating"); 
.setAttribute("role", "slider"); 
.setAttribute("aria-labelledby", r.id); 
.setAttribute("aria-valuemin", 0); 
.setAttribute("aria-valuemax", maxRating); 
.setAttribute("aria-valuenow", value); 
.setAttribute("aria-readonly", true); 


mwmwmwmwmwm wm 


//create a group and give it a tooltip title 

var g = document.createElementNS(ns.svg, "g"); 
s.insertBefore(g, null); 

var t = document.createElementNS(ns.svg, "title"); 
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t.textContent = value + " out of " + maxRating; © 
g.insertBefore(t, g.firstChild); 


//create and insert the stars into the group 
for (var j=0; j<maxRating; j++) { 
var u = document.createElementNS(ns.svg, "use"); 
u.setAttribute("class", "star"); 
.setAttributeNS(ns.xlink, "href", "#star"); 
.setAttribute("width", "1"); 
.setAttribute("x", j); 
.insertBefore(u, null); (4) 


wocce 


} 


r.insertBefore(s, null); 
r.classList.add("initialized"); (5) 
} 
DO; 


@ 该 脚本 选中 所 有 拥有 data-rating 属性 的 元 素 ， 然 后 循环 它们 。 每 一 个 
都 在 没有 id 时 任意 分 配 一 个 id， 这 在 ARIA 引用 时 有 用 。 


O SVG 元 素 在 创建 时 都 设置 了 viewBox, class, ARIA 等 属性 ， 同 时 还 把 从 
数据 属性 上 分 析出 的 评级 值 以 及 最 大 评级 值 作为 常数 存储 在 脚本 中 。 


O <title 元 素 用 于 把 评级 翻译 为 工具 提示 文本 。 因 为 许多 浏览 器 在 
<title> 直接 作为 <svg> 的 子 元 素 时 不 把 它 显示 为 提示 工具 ， 额 外 的 组 
(<g>) 用 于 包 title 和 星星 图 标 。 


O 星星 图 标本 身 (<use> 元 素 ) 都 是 一 样 的 ， 除 了 沿 着 SVG 的 宽度 把 它们 
分 隔 开 的 x 属性 ， 图 标 都 被 添加 到 <g> 内 。 


O 整个 图 形 都 被 插入 到 拥有 data-rating 属性 的 元 素 的 最 后 。 然 后 该 元 素 
通过 initialized 类 来 避 开 降 级 的 CSS 样式 。 


每 个 SVG 动态 生成 的 内 容 都 一 样 ， 除 了 aria-vaLuenow 和 aria-labelledby 
属性 以 及 <title> 的 内 容 。 写 为 标记 的 话 ， 如 下 所 示 : 


<svg viewBox="0 0 5 1" 

role="slider" aria-labelledby="png" 

aria-valuemin="0" aria-valuemax="5" 

aria-valuenow="4" aria-readonly="true"> 

<g> 

<title>4 out of 5</title> 
<use Class="star" xlink:href="#star" width="1"/> 
<use Class="star" xlink:href="#star" width="1" x="1"/> 
<use Class="star" xlink:href="#star" width="1" x="2"/> 
<use Class="star" xlink:href="#star" width="1" x="3"/> 
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<use class="star" xlink:href="#star" width="1" x="4"/> 


</g> 
</svg> 


这 种 结构 很 适合 于 使 用 标签 模板 来 生成 动态 内 容 的 JavaScript 库 。 但 是 ， 一 
定 要 确定 你 使 用 的 模板 工具 能 够 恰当 地 识别 SVG 元 素 并 且 给 它们 分 配 SVG 
命名 空间 ;， 否则， 可 能 你 最 终生 成 的 动态 DOM 拥有 正确 的 标签 名 和 属性 ， 


但 是 没有 生成 SVG 





图 像 。 





大 
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之 前 介绍 过 ， 线 性 渐变 是 依据 一 条 线 (渐变 矢量 ) 的 坐标 来 定义 的 。 颜 色 
结 点 沿 着 这 条 线 来 设 定位 置 。 每 种 颜色 的 值 在 直线 的 两 侧 都 会 无 限 延伸 。 
通过 调整 渐变 结 点 和 操作 矢量 ， 线 性 渐变 可 以 创建 许多 效果 。 但 SVG 中 的 
渐变 不 只 这 一 种 。 

径 向 渐变 也 是 一 种 渐变 效果 ， 在 这 里 ， 颜 色 改 变 治 着 一 点 向 外 辐射 。 这 些 渐 
变 可 以 创建 发 光 的 灯 的 效果 ， 或 者 可 用 于 表示 球体 和 类 似 圆 形 结构 的 阴影 。 
径 向 渐变 最 简单 的 一 种 形式 是 通过 定义 一 个 圆 ， 然 后 颜色 从 圆心 到 边缘 逐 
渐 改 变 。 这 也 是 SVG 中 <radialGradient> 元 素 的 默认 行为 。 通 常 ， 默 认 行 
为 并 不 是 唯一 的 选择 ， 你 可 以 通过 使 用 SVG 径 疝 渐变 创建 多 种 效果 ， 包 括 
一 些 目前 还 不 能 通过 CSS 渐变 来 实现 的 效果 。 

本 章 介绍 所 有 可 能 实现 的 效果 ， 略 过 了 径 向 新 变 与 线性 新 变 的 相似 部 分 而 
专注 于 它们 之 间 的 区 别 。 最 后 一 节 的 大 型 图 片 ， 向 你 展示 了 如 何 结合 多 种 
不 同 渐变 来 创建 复杂 的 场景 。 


9.1 径 回 渐变 基础 


径 向 渐变 与 线性 浙 变 在 结构 上 类 似 ， 至 少 在 标签 上 很 相似 。 与 <linearGradient> 
一 样 ，<radialGradient> 是 <stop> 元 素 的 容器 ， 每 个 <Stop> 都 有 一 个 介 于 
0 到 1 (0% 到 100%) 之 间 的 offset 属性 。 结 点 的 值 同样 通过 stop-color 
和 stop-opacity 样式 或 表现 属性 来 指定 。 
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它们 的 不 同 之 处 在 于 这 些 结 点 的 偏 移 映 射 到 要 填充 的 二 维 空间 的 方式 。 

向 渐变 ， 偏 移 是 起 始点 到 结束 圆 的 距离 的 一 部 分 。 你 可 以 修改 起 始 
点 ( 称 为 焦点 ) 的 位 置 以 及 结束 圆 的 大 小 和 位 置 。 

默认 情况 下 ， 当 <radialcradient> 没有 任何 位 置 属 性 时 ， 结 束 圆 是 填充 对 

象 边 界 盒 的 最 大 圆 ， 焦 点 就 是 它 的 中 心 。 

peg Retin 6 章 介 绍 结 点 和 偏 移 时 用 到 过 的 基本 的 红 蓝 渐变 ， 结 

点 没有 变 ， 只 不 过 把 它们 放 到 了 <radialcradient> 元 素 里 面 。 

如 果 例 9-1 中 的 径 癌 渐变 和 对 应 的 线性 渐变 在 同一 个 文件 中 ， 

我 们 可 以 使 用 xLink:href 来 复制 结 点 ， 即 使 它们 是 不 同 的 渐 


变 类 型 。 











例 9-1 中 的 渐变 用 于 填充 圆 ， 结 果 如 图 9-1 所 示 。 


























图 9-1; 各 种 结 点 图 案 的 径 向 渐变 
例 9-1 创建 径 向 渐变 来 填充 圆 


<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="1in"> 
<title xml:lang="en">Radial Gradients</title> 
<radialGradient id="red-blue"> 
<stop stop-color="red" offset="0"/> 
<stop stop-color="LightSkyBlue" offset="1"/> 
</radialGradient> 
<radialGradient id="red-blue-2"> 
<stop stop-color="red" offset="0"/> 
<stop stop-color="lightSkyBlue" offset="0.3"/> 
<stop stop-color="red" offset="1"/> 
</radialGradient> 
<radialGradient id="red-blue-3"> 
<stop stop-color="red" offset="0.3"/> 
<stop stop-color="lightSkyBlue" offset="0.7"/> 
</radialGradient> 
<radialGradient id="red-blue-4"> 
<stop stop-color="red" offset="0.3"/> 
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<stop stop-color="lightSkyBlue" offset="0.3"/> 

<stop stop-color="lightSkyBlue" offset="0.7"/> 

<stop stop-color="red" offset="0.7"/> 
</radialGradient> 
<circle r="0.5in" cy="50%" cx="12.5%" fill="url(#red-blue)" /> 
<circle r="0.5in" cy="50%" cx="37.5%" fill="url(#red-blue-2)" /> 
<circle r="0.5in" cy="50%" cx="62.5%" fill="url(#red-blue-3)" /> 
<circle r="0.5in" cy="50%" cx="87.5%" fill="url(#red-blue-4)" /> 

</svg> 


颜色 结 点 没有 绘制 为 平行 线 ， 而 是 被 绘制 为 同心 圆 。 当 颜色 过 渡 比 较 锐 利 
时 ， 就 像 最 后 一 个 例子 那样 ， 将 创建 出 于 心 的 效果 。 


a> 
92 填充 盒子 
当 使 用 径 向 渐变 来 填充 圆 时 ， 渐 变 的 结束 圆 (即将 要 填充 对 象 边 界 盒 的 最 
大 圆 ) 就 是 圆 本 身 。 因 此 渐变 可 以 完美 适应 形状 。 当 情况 不 是 这 样 时 ， 额 
外 的 部 分 是 根据 spreadMethod 属性 来 填充 的 ， 默 认 情 况 下 ， 会 使 用 最 后 一 
个 结 点 颜色 来 填补 。 


图 9-2 显示 了 用 例 9-1 中 的 渐变 填充 1 平方 英寸 的 长 方形 。 

















9-2: 使 用 径 向 渐变 填充 正方 形 





径 向 渐变 也 可 以 很 好 地 填充 <ellipse> 元 素 ， 如 图 9-3 所 示 ， 现 在 每 个 结 点 
都 代表 一 个 同心 椭圆 。 




















9-3: 使 用 径 向 渐变 填充 椭圆 





我 们 同样 可 以 看 到 使 用 渐变 填充 椭圆 边界 盒 大 小 的 长 方形 时 的 椭 贺 图案， 
如 图 9-4 所 示 。 
































图 9-4; 使 用 径 向 渐变 填充 长 方形 (FEDH) 


图 9-3 和 图 9-4 的 结果 使 用 都 是 例 9-1 中 定义 的 渐变 ， 在 渐变 元 素 上 没有 属 
性 ， 表 明 应 该 使 用 椭圆 图 案 来 填充 。 相 反 ， 椭 圆 图 案 是 拉 伸 对 象 边界 盒 单 
位 创建 的 坐标 系 的 结果 。 结 点 图 案 依然 是 数学 上 的 “ 圆 "， 结 点 的 每 一 点 到 
中 心 点 的 距离 都 相同 ， 不 过 当 你 度量 它 时 ， 它 已 经 在 拉 伸 后 的 坐标 系 中 了 。 


创建 总 是 沿 着 完美 圆 的 径 向 SVG 渐变 而 忽略 边界 盒 尺 的 唯 
一 方式 ， 是 使 用 gradientUnits="userSpaceOnUse"。 然 后 ， 你 
需要 使 用 其 他 属性 来 改变 渐变 的 大 小 和 位 置 来 匹配 它 填 充 的 






































当 填 充 正 方形 或 长 方形 时 ，100% 的 结 点 偏 移 的 位 置 是 沿 着 刚刚 触 磁 到 每 
一 条 边 的 圆 〈《 有 可 能 被 拉 伸 )。 但 在 图 片 中 ， 纯 色 内 边 距 隐藏 了 这 个 边界 。 
spreadMethod 属性 同样 可 以 用 来 改变 内 边 距 效果 ， 且 另外 的 可 选 值 也 是 
repeat 和 reflect. 


正如 第 8 章 中 提 到 的 那样 ， 编 写本 书 时 ，WebKit 浏览 器 不 
支持 重复 和 镜像 渐变 。 旧 版 本 的 其 他 浏览 器 (2014 年 之 前 的 
Firefox 和 2013 年 之 前 的 Chrome) 将 忽略 spreadMethod 属性 
的 值 而 直接 填补 渐变 。 














当 重 复 或 映射 径 向 渐变 时 ， 你 不 会 以 重复 圆 的 虚线 图 案 结束 。 相 反 ， 颜 色 
图 案 会 沿 着 每 条 射线 〈 从 中 心 点 向 外 辐射 ) 重复 或 镜像 地 扩展 ， 直 到 到 达 
形状 的 边缘 。 当 径 向 渐变 用 于 填充 长 方形 时 ， 它 会 动态 改变 拐角 的 样子 。 
例 9-2 中 使 用 了 不 同 的 选项 ， 效 果 如 图 9-5 所 示 。 
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图 9-5: 使 用 不 同 扩展 方式 的 径 向 渐变 : 填补 (£), BS (P), RR (6) 
例 9-2 使 用 spreadMethod 改变 拐角 效果 


<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.0rg/1999/xlink" 
width="4in" height="1in"> 
<title xml: lang="en">Repeating Radial Gradients</title> 
<radialGradient id="red-blue" spreadMethod="pad"> 
<stop stop-color="red" offset="0"/> 
<stop stop-color="lightSkyBlue" offset="1"/> 
</radialGradient> 
<radialGradient id="repeat" spreadMethod="repeat" 
xlink:href="#red-blue" /> 
<radialGradient id="reflect" spreadMethod="reflect" 
xLink:href="#red-blue" /> 


<rect height="1in" width="32%" x="0" fill="url(#red-blue)" /> 

<rect height="1in" width="32%" x="34%" fill="url(#repeat)" /> 

<rect height="1in" width="32%" x="68%" fill="url(#reflect)" /> 
</svg> 


在 重复 渐变 中 ， 颜 色 治 着 圆 / 椭圆 的 边缘 瞬间 切换 ， 重 新 以 第 一 个 颜色 结 点 


开始 。 在 映射 渐变 中 ， 边 缘 在 颜色 变 回 去 之 前 到 达 顶 峰 。 要 真正 看 到 这 些 
效果 ， 我 们 首先 需要 创建 一 个 渐变 圆 没有 填 满 整 个 边界 盒 的 径 向 渐变 。 


CSS 与 SVG 
CSS 中 的 径 向 渐变 
CSS 同样 也 有 径 向 渐变 ， 使 用 radial-gradient 函数 来 定义 。 与 线性 渐变 一 
样 ， 它 的 语法 和 值 与 SVG 渐变 相似 但 不 同 。 


CSS 径 向 渐变 的 一 个 重要 属性 (目前 SVG 中 不 支持 ) 是 可 以 选择 圆 形 或 
椭圆 形 的 渐变 形状 。radiaL-gradient 函数 的 第 一 个 参数 用 于 描述 最 终 的 形 
状 。 它 包括 关键 词 circle 来 要 求 渐变 必须 沿 着 完美 的 圆 ， 而 忽略 生成 图 片 
的 宽 高 比 ， 还 有 关键 词 ellipse 来 依据 盒子 拉 伸 渐变 。 





非 正 方形 金子 内 的 完美 的 圆 不 会 触及 到 金子 的 所 有 边 。 因 此 形状 参数 还 
包括 尺寸 信息 ， 它 们 可 用 于 圆 和 栅 圆 。 定 义 尺 寸 最 简单 的 方式 是 使 用 以 
下 四 个 尺寸 关键 词 之 一 : closest-side, farthest-side, closest-corner, 
farthest-corner, 

以 过 号 来 结束 形状 和 渐变 的 尺寸 等 信息 ， 紧 接着 是 一 个 喜 号 分 隔 的 颜色 结 
点 列表 。 例 如 ， 如 下 的 背景 样式 规则 生成 图 9-6 所 示 的 渐变 。 


background: radial-gradient(circle closest-side, 
red, LightSkyBlue) ; 

















9-6: BAZ CSS 渐变 


默认 的 形状 是 ellipse， 而 默认 的 尺寸 是 farthest-corner， 所 以 如 下 的 渐 
变 都 是 相等 的 。 


background: radial-gradient(red, lightSkyBlue) ; 
background: radial-gradient(ellipse, 

red 0%, LightSkyBlue); 
background: radial-gradient(farthest-corner, 

red, LightSkyBlue 100%); 
background: radial-gradient(farthest-corner ellipse, 

red 0%, LightSkyBlue 100%); 


使 用 farthest-corner 意味 着 没有 空 的 拐角 要 填补 ， 也 意味 着 最 后 一 个 颜色 
结 点 只 可 以 在 扬 角 可 见 ， 如 图 9-7 所 示 。 

















9-7: 椭圆 CSS 渐变 





个 别 颜 色 结 点 的 位 置 可 以 使 用 有 单位 的 长 度 或 百分比 来 定义 。 当 使 用 百 分 
比 时 ， 它 们 是 圆 / 椭圆 半径 的 百分比 。 当 在 椭圆 渐变 中 使 用 长 度 时 ， 它 们 是 
沿 着 椭圆 水 平 半 径 度 量 的 。 如 果 没 有 定义 偏 黎 ， 颜色 在 可 用 的 空间 内 均匀 
分 布 。 

与 线性 渐变 类 似 ，CSS 还 有 一 个 单独 的 repeating-radial-gradient 有 函数 。 
它 的 参数 与 正常 的 径 向 渐变 相同 ， 渐 变 每 个 周期 的 尺寸 可 以 通过 第 一 个 和 
最 后 一 个 偏 移 的 差 来 计算 。 


当 第 一 个 偏 移 非 零 时 ，Blink 和 WebKit 浏览 器 目前 将 使 用 纯 
色 填 充 圆 的 中 心 。Firefox 和 下 会 向 内 向 外 重复 渐变 ， 依 照 
声明 中 的 通用 指令 ( 对 于 所 有 类 型 的 渐变 ) 来 在 两 个 方向 上 
重复 周期 。 


再 次 说 明 ， 要 想 创建 映射 渐变 ， 你 必须 使 渐变 圆 变 为 两 们 大， 然后 手动 添 
加 两 次 颜色 结 点 。 


93 缩放 圆 


现在 ， 你 知道 了 线性 渐变 的 默认 位 置 和 大 小 可 以 通过 渐变 元 素 上 的 属性 
来 修改 。 对 于 径 癌 渐变 也 同样 如 此 。 就 像 <LinearGradient> 的 位 置 属性 
看 起 来 很 像 <Line> 的 属性 那样 ，<radialGradient> 的 位 置 属 性 看 起 来 和 
<circle> 很 像 。 


<radialGradient> 上 的 cx, cy 以 及 r 属性 定义 了 100% 偏 移 的 圆 的 大 小 和 
位 置 。 它 们 的 默认 值 都 是 50%， 所 以 会 创建 一 个 以 坐标 系 中 心 为 圆心 且 填 
充 其 整 个 宽度 和 长 度 的 圆 。 默 认 情 况 下 ， 焦 点 (0% 偏 移 颜色 的 点 ) 会 根据 
(cx,cy) 点 移动 。 


例 9-3 修改 了 这 些 属性 创建 了 一 个 小 的 圆 形 渐变 ， 且 偏离 user SpaceOnUse 
坐标 系 的 中 心 。 这 在 渐变 圆 的 边缘 和 形状 的 边缘 之 间 留 下 足够 的 空间 ， 
reflect 扩展 方式 可 以 创建 一 个 非常 好 的 波纹 效果 ， 就 像 雨滴 落 在 积 水 上 的 
波浪 ， 如 图 9-8 所 示 。 


例 9-3 探 制 径 向 渐变 的 尺寸 和 位 置 
<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="2in"> 
<title xml:lang="en">Repeating Radial Ripples</title> 
<radialGradient id="raindrop" spreadMethod="reflect" 


























gradientUnits="userSpaceOnUse" 
cx="30%" cy="70%" r="15px"> 
<stop stop-color="lightSteelBlue" offset="0.4"/> 
<stop stop-color="darkSlateGray" offset="0.8"/> 
<stop stop-color="darkSlateBlue" offset="1"/> 
</radialGradient> 
<rect height="100%" width="100%" fill="url(#raindrop)" /> 
</svg> 


9-8: 固定 圆 的 大 小 的 映射 径 向 渐变 


基本 圆 的 半径 是 13px， 所 以 每 隔 15px 的 距离 ， 渐 变 循环 一 次 结 点 列表 一 一 
正 序 或 者 倒序 。 图 中 暗色 的 环 以 30px 分 隔 开 ， 该 距离 是 映射 渐变 在 两 个 方 
向 上 各 循环 一 个 周期 所 需 的 距离 。 


相 比 而 言 ， 使 用 spreadMethod="repeat" 可 以 更 清晰 地 看 到 单个 重复 (15px 
间隔 ) ， 如 图 9-9 所 示 。 


©) 


89-9: 固定 圆 的 大 小 的 重复 镜像 渐变 
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css 5 SVG 
控制 CSS 径 向 渐变 的 尺寸 和 位 置 


你 可 以 通过 给 radial-gradient 或 repeating-radial-gradient 函数 的 第 一 
个 参数 添加 更 多 信息 WS > 来 榨 制 CSS a EA 形 的 尺寸 和 位 置 


第 一 个 参数 完整 的 语法 如 下 所 示 : 


[ <ending-shape> || <size> ]? [ at <position> ]? 


翻译 为 汉语 的 意思 是 : 形状 和 尺寸 是 可 选 的 ， 且 顺序 也 没有 严格 规定 ， 之 
后 可 选 的 是 关键 词 at 以 及 位 置 。 


形状 是 关键 词 circle 和 ellipse 其 中 之 一 。 尺 寸 可 以 是 一 个 cLosest/ 
farthest-side/corner 关键 词 或 确切 的 半径 长 度 。 圆 形 有 一 个 半径 长 度 ， 而 
MAAN: 第 一 个 是 水 平 半径 ， 然 后 是 垂直 半径 。 在 给 尺寸 设置 长 度 时 ， 
形状 关键 词 不 是 必需 的 ， 因 为 它 是 由 长 度 值 来 决定 的 。 


对 于 椭圆 渐变 ， 两 个 半径 值 还 可 以 分 别 被 指定 为 图 片 宽 和 高 的 百分比 。 目 

前 你 无 法 使 用 百分比 来 指定 圆 形 CSS 渐变 的 尺寸 。 未 来 的 CSS 渐变 可 能 会 
采用 SVG 相对 于 对 角 线 长 度 来 计算 圆 形 半径 百分比 的 方法 ， 现 在 这 可 以 用 
& CSS 形状 模块 的 圆 中 。 


CSS 径 向 渐 变 的 位 置 相 当 于 SVG 中 的 cx 和 cy 属性 。 它 可 能 是 长 度 值 或 百 
分 比 ， 也 可 能 是 指定 CSS 背景 位 置 的 关键 词 的 组 合 。 关 键 词 at 必须 要 有 ， 
用 于 区 分 位 置信 息 和 尺寸 信息 。 上 默认 的 位 置 是 at center, 或 at 50% 50%, 


当 把 渐变 定位 在 边 上 或 所 角 ( 例 如 ， 在 右上 角 ) 时 ， 到 
closest-side 或 closest-corner WIEBE, RAH 
形 渐 交 折 营 为 一 个 点 ， 椭 圆 渐 交 折 营 为 线性 渐 交 。 


基于 以 上 信息 (注意 CSS 没有 映射 渐变 ， 只 有 简单 的 重复 渐变 ) ， 例 9-3 中 
积 水 上 的 波纹 渐变 可 以 使 用 如 下 代码 创建 : 


background: repeating-radial-gradient( 
30px at 30% 70%, 
lightSteelBlue 0%, lightSteelBlue 20%, 
darkSlateGray 40%, darkSlateBlue 50%, 
darkSlateGray 60%, 
lightSteelBlue 80%, lLightSteelBlue 100%); 





圆 的 半径 


变 为 两 倍 (从 15px 变 到 30px) 以 留 下 映射 渐变 的 空间 。 类 似 地 ， 


偏 移 百分比 减 半 (SVG 渐变 中 的 100% 变 为 CSS 渐变 圆 形 的 3$0%)， 复 制 
一 份 结 点 来 填充 圆 的 剩余 部 分 。 不 同 于 重复 线性 渐变 ， 你 不 必 担 心 百分比 
偏 移 打 乱 渐变 的 比例 ， 它 们 一 直 都 是 你 指定 的 形状 半径 的 百分比 。 


9.4 
对 于 径 向 





调整 焦点 


渐变 还 有 另外 两 个 位 置 属性 : fx 和 fy。 他 们 是 渐变 焦点 的 坐标 。 





如 果 说 渐变 圆 是 描述 100% 偏 移 处 结 点 的 位 置 ， 那 么 焦点 描述 的 就 是 0% 处 


结 点 的 位 置 。 





我 们 之 前 看 到 的 渐变 使 用 的 都 是 默认 的 焦点 ， 通 常 是 圆心 。fx 的 默认 值 是 


cx 的 值 ， 
焦点 不 在 











fy 的 默认 值 是 cy 的 值 。 任 何其 他 值 都 会 创建 一 个 不 对 称 的 渐变 。 
圆心 意味 着 什么 呢 ? 它 意味 着 渐变 圆 的 长 度 在 每 个 方向 上 都 是 不 











同 的 。 从 该 点 出 发 的 每 条 射线 在 到 达 圆 的 边缘 时 会 通过 所 有 的 结 点 颜色 。 


焦点 不 在 


在 另 一 个 方向 上 被 放大 。 这 可 能 是 你 能 看 到 的 最 简单 的 效果 。 








焦点 应 该 在 渐变 圆 内 ， 如 果 不 这 样 ， 根 据 SVG 1.1， 它 将 被 
移动 到 与 它 最 近 的 圆 的 边缘 上 。SVG 2 基于 目前 在 HIML 
canvas 渐变 阔 数 中 使 用 的 方式 提出 了 不 同 的 方案 。 换 句 话 
说 ， 如 果 焦 点 在 圆 的 外 部 ， 就 不 要 指望 跨 浏览 器 有 一 致 的 效 


RT. 









































圆心 看 起 来 是 什么 样子 呢 ? 效果 新 变 是 在 一 个 方向 上 被 压缩 了 而 























例 9-4 构建 了 一 个 显示 渐变 的 网 格 ， 使 用 fx 属性 在 中 心 点 左右 移动 焦点 ， 
还 可 以 使 用 cy 属性 上 下 移动 渐变 圆 的 中 心 点 。 组 合 结果 如 图 9-10 所 示 。 
该 例 中 设置 spreadMethod 的 值 为 reflect 来 显示 各 个 方向 上 重复 距离 是 如 
何 与 焦点 和 圆 的 边 之 间 的 原 距离 相 匹配 的 。 这 看 起 来 真 的 很 酷 ! 








AR 
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图 9-10: 比较 径 向 渐变 中 心 点 改变 ( 行 ) 和 焦点 位 置 改变 ( 列 ) 的 效果 
例 9-4 控制 径 向 渐变 的 尺寸 和 位 置 


<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="4in" height="3in"> 
<title xml:lang="en">Focus Point Versus Center Point</title> 
<defs> 


<radialGradient id="center" spreadMethod="reflect" 
r="30%"> o 
<stop stop-color="darkRed" offset="0"/> 
<stop stop-color="lightYellow" offset="1"/> 


</radialGradient> 

<radialGradient id="left" xlink:href="#center" 
fx="25%"/> (2) 

<radialGradient id="right" xlink:href="#center" 
fx="75%"/> 

<radialGradient id="left-up" xlink:href="#left" 
cy="25%" /> © 

<radialGradient id="left-down" xlink:href="#left" 
cy="75%"/> 

<radialGradient id="center-up" xlink:href="#center" 
cy="25%"/> 
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<radialGradient id="center-down" xlink:href="#center" 


cy="75%" [> 

<radialGradient id="right-up" xlink:href="#right" 
cy="25%" /> 

<radialGradient id="right-down" xlink:href="#right" 
cy="75%" [> 

<rect id="r" width="30%" height="30%" /> (4) 


</defs> 

<use Xlink:href="#r" x="0%" y="0%" fill="url(#left-up)"/> 

<use Xlink:href="#r" x="35%" y="0%" fill="url(#center-up)"/> 

<use Xlink:href="#r" x="70%" y="0%" fill="url(#right-up)"/> 

<use Xlink:href="#r" x="0%" y="35%" fill="url(#left)"/> 

<use Xlink:href="#r" x="35%" y="35%" fill="url(#center)"/> 

<use xlink:href="#r" x="70%" y="35%" fill="url(#right)"/> 

<use xlink:href="#r" x="0%" y="70%" fill="url(#left-down)"/> 

<use xlink:href="#r" x="35%" y="70%" fill="url(#center-down)"/> 

<use Xlink:href="#r" x="70%" y="70%" fill="url(#right-down)"/> 
</svg> 


@ 将 被 用 于 中 间 部 分 的 新 变 使 用 默认 居中 的 圆 形 和 焦点 。 半 径 设置 为 对 象 
边界 盒 的 30%， 给 重复 效果 留 下 空间 。 

O 中 间 一 行 的 其 他 渐变 通过 调整 fx 在 中 心 的 左 侧 或 右 侧 来 创建 ， 通 过 使 用 
xlink:href 属性 来 复制 第 一 个 渐变 的 颜色 结 点 和 半径 。 

© 剩 下 的 渐变 从 前 面 的 某 个 渐变 中 复制 颜色 结 点 、 半 径 以 及 焦点 ， 之 后 调 
整 cy 的 值 。 

O 因为 我 们 要 有 9 个 同样 宽 高 的 长 方形 ， 所 以 预先 定义 一 个 形状 ， 然 后 使 
用 <use> 元 素来 复制 。 

如 你 所 见 ， 改 变 渐变 圆 形 的 中 心 点 会 变换 整个 渐变 图 案 的 位 置 。 相 比 而 言 ， 

改变 焦点 会 明显 改变 渐变 的 整体 图 案 ， 尤 其 是 在 重复 渐变 中 。 

如 果 你 只 改变 中 心 点 而 没有 改变 焦点 ， 当 然 会 大 大 改变 渐变 


的 外 观 。 例 9-4 中 ,没有 设置 渐变 的 垂直 位 置 fy， 所 以 它 可 
以 自动 调整 来 匹配 cy 的 变化 。 
































从 一 个 点 扩展 聚焦 区 域 
SVG 2 中 给 径 向 渐变 增加 了 一 个 新 的 fr 属性。 它 将 会 围绕 焦点 定义 一 个 
， 表 示 渐 变 0% 偏 移 的 位 置 。 相 似 的 参数 已 经 可 以 在 HTML canvas 绘 





大 
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当 焦点 在 主要 的 国 的 中 心 时 ， 渐 变 的 结果 与 第 一 个 结 点 偏 移 不 为 零 时 一 样 ， 
除非 有 额外 的 间隔 没有 包含 在 循环 周期 内 。 对 于 不 对 称 渐变 ， 它 的 几何 形 
状 将 与 任何 现在 可 以 通过 SVG 生成 的 形状 都 不 同 。 


9.5 变换 径 向 渐变 


gradientTransform 属性 也 可 以 用 在 <radialGradient> 上 ， 且 功能 与 用 在 线 
性 渐变 上 完全 相同 ， 它 会 改变 渐变 底层 坐标 系 ， 平 移 、 旋 转 、 缩 放 或 倾斜 
不 仅仅 作用 在 中 心 点 而 且 是 作用 在 整个 渐变 上 。 

再 次 说 明 ， 你 必须 要 注意 拉 伸 对 象 边界 盒 坐标 系 的 效果 。 无 论 如 何 旋转 
objectBoundingBox 径 向 渐变 ， 它 总 会 被 沿 着 形状 的 长 轴 拉 伸 。 

但 是 你 可 以 通过 使 用 skew 变换 来 创建 一 个 沿 不 同 轴 拉 伸 的 椭圆 。 例 9-5 在 
焦点 不 同 的 三 个 渐变 上 使 用 相同 的 skew 变换 ， 结 果 如 图 9-11 所 示 。 


=, 


Nd A 


9-11: 倾斜 焦点 不 同 的 径 向 渐变 


例 9-5 倾斜 径 向 渐变 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xLink" 
width="4in" height="1in"> 
<title xml: lLang="en">Skewed Radial Gradients</title> 
<defs> 




















<radialGradient id="center" spreadMethod="repeat" r="40%" 
gradientTransform="translate(-0.3,0) skewX(30)"> © 
<stop stop-color="indigo" offset="0"/> 
<stop stop-color="LightPink" offset="0.5"/> 
<stop stop-color="lightSkyBlue" offset="0.7"/> 
<stop stop-color="indigo" offset="1"/> (2) 
</radialGradient> 
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<radialGradient id="left" xlink:href="#center" 
Fx="25%" [> 

<radialGradient id="right" xlink:href="#center" 
Fx="75%" [> © 


<rect id="r" width="30%" height="100%" /> 
</defs> 


<use xlink:href="#r" x="0%" y="0%" fill="url(#left)"/> 

<use xlink:href="#r" x="35%" y="0%" fill="url(#center)"/> 

<use Xlink:href="#r" x="70%" y="0%" fill="url(#right)"/> 
</svg> 


@ skewx(30) 变换 将 会 把 渐变 上 的 点 向 右 移动 y 轴 增 加 的 距离 。 

O 渐变 使 用 的 是 repeat 扩展 方式 ， 所 以 结 点 的 顺序 将 不 会 改变 。 第 一 个 和 
最 后 一 个 结 点 颜色 相同 ， 这 就 避免 了 锐利 的 过 渡 。 

© 与 例 9-4 相同 ， 其 他 的 渐变 是 通过 左右 移动 焦点 创建 的 。 


例 9-5 中 使 用 的 gradientTransform 中 还 包括 一 个 水 平 的 变换 来 重新 设 定 渐 
变 的 中 心 位 置 ， 它 也 会 受到 skew 的 影响 。 


<radialGradient> 上 的 变换 是 相对 于 坐标 系 的 原点 (左上 角 ) 
而 不 是 渐变 的 中 心 来 计算 的 。 


倾斜 和 偏离 中 心 的 焦点 使 得 径 向 渐变 不 局 限于 完美 的 几何 对 称 ， 还 增加 了 
三 维 的 感觉 。 因 此 ， 这 也 是 渐变 可 以 用 在 写实 绘制 中 的 一 种 方式 。 


96 ”大 型 渐变 


要 想 细致 入 微 地 表现 真实 对 象 ， 你 需要 考虑 光线 和 阴影 的 颜色 变化 。SVG 
包含 了 滤 镜 函数 ， 用 它 来 模拟 光照 效果 ,但 是 这 会 增加 额外 的 处 理 时 间 。 
如 果 你 可 以 使 用 渐变 来 达到 同样 的 效果 ， 往 往 会 更 加 高 效 ， 尤 其 是 在 你 之 
后 想 要 给 图 片 添 加 动画 的 时 候 。 


9-12 比较 了 这 两 种 效果 。 一 个 形状 使 用 不 对 称 的 径 向 渐变 来 模拟 黄色 
光照 射 在 一 个 红色 球 上 的 效果 ， 另 一 个 使 用 光照 滤 镜 来 实现 相似 的 效果 。 
渐变 不 能 创建 像 滤 镜 那 样 的 三 维 曲 线 ， 但 非常 接近 。 完 整 的 代码 如 例 9-6 
所 示 。 





























图 9-12; 聚光灯 照 在 球 上 ， 通 过 近似 的 渐变 生成 (E) 或 光照 滤 镜 计算 生成 (4) 
例 9-6 使 用 渐变 或 滤 锐 创建 灯光 效 采 


<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="2in" > 
<title xml: lang="en">Simulated Lighting Versus 
Lighting Filters</title> 


<radialGradient id="faux-lighting" 
cx="45%" cy="45%" r="60%" 


fx="30%" fy="30%" > o 
<stop offset="0.1" stop-color="lightYellow" /> 
<stop offset="0.9" stop-color="darkRed" /> (2) 
</radialGradient> 


<circle cx="25%" cy="50%" r="0.9in" 
fill="url(#faux-lighting)"/> 
<filter id="yellow-glow" primitiveUnits="objectBoundingBox"> 
<feGaussianBlur in="SourceAlpha" stdDeviation="0.3" /> 
<feComposite in2="SourceAlpha" operator="in" /> (4) 
<feSpecularLighting surfaceScale="0.1" 
specularConstant="1" 
specularExponent="20" 
lighting-color="lightYellow" 
result="highlight"> 
<fePointLight x="0.35" y="0.35" z="0.7"/> (5) 
</feSpecularLighting> 
<feComposite in="SourceGraphic" in2="highlight" 
operator="arithmetic" 
k1="0" k2="1" k3="0.9" k4="0" /> 
<feComposite in2="SourceAlpha" operator="in" /> (6) 
</filter> 
<circle cx="75%" cy=" 50%" r="0.9in" 
fill="darkRed" filter="url(#yellow-glow)" /> (7) 
</svg> 


@ <radialcradient> 定义 了 一 个 比 边 界 盒 稍 大 的 圆 ， 并 向 左上 方 偏离 中 心 。 


焦点 在 左上 方 移动 距离 更 多 的 地 方 。 因 此 形状 的 这 一 边 会 受到 初始 颜色 
结 点 更 大 的 影响 ， 而 右 下 方 将 被 最 后 的 颜色 结 点 控制 。 
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的 小 圆 ， 并 在 渐变 圆 的 边 上 露出 最 后 的 红色 。 
© 在 第 一 个 贺 上 简单 地 应 用 渐变 填充 的 效果 。 

O 滤 镜 首先 生成 形状 alpha 通道 的 一 个 模糊 版 本 ， 然 后 把 它 沿 着 原形 状 的 
边缘 裁剪 。 这 时 就 创建 了 一 个 距 形状 边缘 越 近 ，alpha 的 值 越 小 的 层 。 
O 光照 滤 镜 使 用 上 一 步 的 alpha 通道 作为 隆起 映射 来 定义 对 象 的 三 维 形 
状 。 然 后 计算 添加 到 形状 上 的 光 的 量 ,， 使 用 各 种 各 样 的 属性 来 定义 形 
状 的 反射 效果 ， 使 用 <fePointLight> 元 素来 定义 入 射 光 的 位 置 和 图 案 。 

lighting-color 属性 指定 了 浅黄 色 的 光 。 
O 最 后 一 步 把 光照 效果 和 底层 彩色 图 形 结合 在 一 起 ， 并 再 次 裁剪 它 ， 所 以 
光 只 在 形状 最 初 不 透明 的 部 分 可 见 。 
O 第 二 个 圆 使 用 纯 darkRed 色 填 充 ， 然 后 通过 filter 属性 应 用 光照 效果 。 
目前 使 用 渐变 代替 光照 滤 镜 最 充分 一 个 理由 就 是 跨 浏 览 器 的 一 致 性 。 即 使 
所 有 浏览 器 都 实现 了 光照 滤 镜 ， 但 是 浏览 器 之 间 的 实现 并 不 一 致 。 
WebKit 目前 没有 实现 光照 效果 的 滤 镜 ， 该 滤 镜 元 素 会 返回 一 
个 透明 层 ; 结合 例 9-6 中 的 例子 来 说 ， 结 果 显 示 的 是 原始 的 
平坦 的 红色 圆圈 ， 与 其 他 滤 镜 结合 ， 图 形 可 能 会 完全 消失 。 





















































其 至 在 支持 滤 镜 光照 效果 的 浏览 器 中 ， 真 切 的 执行 效果 也 有 很 大 的 不 同 。 
图 9-12 中 显示 的 是 在 Firefox 中 的 效果 ， 图 9-13 是 相同 的 代码 在 Chrome 中 
的 演 染 效果 ， 光 照 更 加 强烈 ，IE 会 生成 介 于 两 者 之 间 的 一 个 图 片 。 




















图 9-13; 聚光灯 照 在 球 上 在 另 一 种 浏览 器 中 的 效果 ， 左 侧 是 通过 渐变 生成 ， 右 侧 是 
通过 滤 镜 生成 
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照 滤 镜 需要 通过 多 次 计算 而 渐变 通过 单个 函数 来 生成 。 第 二 ， 滤 镜 在 泻 染 
后 、 光 栅 化 后 的 图 片上 进行 计算 ， 所 以 每 次 底层 形状 改变 或 移动 时 ， 它 都 
需 重新 计算 。 








CSS 与 SVG 
使 用 CSS 径 向 渐变 模仿 焦点 
目前 在 CSS 中 还 没有 办 法 调整 渐变 焦点 。 某 些 情况 下 ， 对 于 非 重 复 渐变 ， 
你 可 以 使 用 分 层 的 背景 图 片 来 模拟 焦点 不 对 称 的 效果 。 焦 点 颜色 使 用 从 有 色 
到 透明 的 一 个 或 多 个 渐变 来 绘制 ， 然 后 把 它 放 在 代表 最 终 形状 的 渐变 之 上 。 
基于 这 种 方法 ， 例 9-7 使 用 CSS 渐变 重新 创建 了 聚光灯 照 在 红色 球 上 的 效 
果 。 图 9-14 展示 了 与 原 SVG 渐变 版 本 对 比 的 结果 。 

















9-14: 使 用 一 个 单独 的 SVG 渐变 (£) 和 分 层 的 CSS 渐变 (6) 来 生成 焦点 渐 
变 效 果 


例 9-7 使 用 分 层 的 CSS 渐变 模拟 偏离 中 心 的 放射 光 
<!DOCTYPE htmL> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>CSS and SVG Simulated Lighting Gradients</title> 
<style type='text/css'> 
html, body { 
height: 2in; 
width: 4in; 
margin: 0; padding: 0; 
text-align: center; (1) 
} 


svg, div.sphere { 
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height: 1.8in; 
width: 1.8in; 
display: block; 
float: left; 
margin: 0.1in; 


div.sphere { 
border-radius: 50%; 
background: 
radial-gradient(ellipse 40% 40% at 32% 32%, 
LlightYellow 15%, 
rgba(100%, 100%, 88%, 0.5) 40%, 
transparent), 
radial-gradient(ellipse 55% 55% at 40% 40%, 
rgba(100%, 100%, 88%, 0.4) 20%, 
transparent), 
radial-gradient(ellipse 60% 60% at 45% 45%, 
rgb(100%,55%,45%), darkRed 90%); © 
} 
</style> 
</head> 
<body> 
<svg> 
<radialGradient id="faux-lighting" 
cx="45%" cy="45%" r="60%" 
fx="30%" fy="30%" > 
<stop offset="0.1" stop-color="LightYellow" /> 
<stop offset="0.9" stop-color="darkRed" /> 
</radialGradient> 
<circle cx="50%" cy="50%" r="50%" 
fill="url(#faux-lighting)"/> © 


</svg> 

<div class="sphere"></div> (4) 
</body> 
</html> 


O 前 两 个 CSS 规则 对 网 页 整体 进行 布局 ， 使 它 与 例 9-6 中 的 SVG 布局 相 
匹配 ， 包 括 GH AEE) 整个 网 页 的 尺寸 。 


@ 渐变 效果 作为 分 层 的 背景 图 像 来 使 用 ， 结 合 三 个 单独 的 radial-gradient 
国 数 来 创建 把 焦点 移动 到 圆 边缘 的 效果 。 中 间 的 新 变 的 结 点 使 用 rgba 函 
数 创建 了 部 分 透明 的 LtghtYeLLow 色 。 


© 作为 对 比 的 SVG 渐变 使 用 内 联 的 SVG 代码 创建 。 
O 单独 使 用 一 个 <div> 标签 来 显示 CSS 渐变 生成 的 背景 内 容 。 
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为 了 在 所 有 浏览 器 中 都 有 最 佳 效 果 ， 例 9-7 中 使 用 的 
transparent 关键 词 应 该 通过 表示 亮 一 些 的 浅黄 色 的 rgba 函 
数 来 代替 。 一 些 旧 版 本 的 Firefox 在 向 transparent 关键 词 过 
渡 时 ， 会 将 颜色 转向 黑色 ( 官方 的 透明 黑色 )。 该 规范 现在 
提供 了 明确 的 引导 方案 来 避免 这 种 问题 。 


目前 已 经 提议 给 CSS 渐变 添加 焦点 参数 (包括 焦点 半径 ) 来 更 简单 地 创建 
这 种 效果 ， 但 具体 语法 还 没有 最 终 确定 。 


SVG 渐变 是 一 个 看 似 简 单 的 话题 。 它 只 有 两 种 类 型 的 渐变 ， 线 性 和 径 向 ， 
但 是 它 有 无 数 可 能 的 变化 来 创建 不 同 的 效果 。 通 过 这 些 变 化 ， 渐 变 可 以 给 
简单 的 矢量 形状 添加 细微 差别 和 小 细节 。 


渐变 是 SVG 开发 者 工具 包 的 一 个 主要 部 分 ， 并 且 可 被 用 于 创建 非常 复杂 和 
精密 的 图 像 。 在 大 多 数 情况 下 ， 这 些 图 片 不 是 通过 单个 精确 的 几何 渐变 组 
成 ， 而 是 由 多 个 部 分 透明 渐变 的 元 素 重合 而 成 。 

我 们 可 以 想象 一 个 戏剧 舞台 之 类 的 东西 来 做 个 练习 ， 完 整 的 场景 包括 侧 矣 
红色 的 天 殷 线 、 顶 部 的 幕布 以 及 配 有 聚光灯 的 舞台 。 作 为 图 片 ， 这 可 以 方 
便 地 突出 给 定 的 对 象 (图 像 、 幻 灯 片 、 视 频 以 及 文本 块 )， 并 且 由 于 它 是 
SVG， 我 们 可 以 直接 对 幕布 进行 打开 关闭 操作 。 

当 幕 布 打开 或 收 起 时 ， 它 会 操作 可 见 光 来 显示 明亮 和 阴影 区 域 ， 这 可 以 通过 
一 个 有 阴影 的 红色 渐变 来 很 好 地 实现 。 我 们 中 的 Amelia 之 前 使 用 简单 重复 
渐变 填充 的 长 方形 创建 了 一 个 类 似 的 场景 。 图 9-15 显示 的 场景 是 由 Kurt 创 
建 的 ， 他 通过 谨慎 地 控制 渐变 结 点 ， 使 它 的 位 置 匹配 路 径 曲 线 来 遮挡 幕布 。 
该 图 片 由 三 个 不 同 的 层 构成 。 

后 面 覆 盖 整 个 宽度 的 是 舞台 ， 它 是 一 个 简单 的 长 方形 ， 且 新 变 从 距离 顶部 
350 个 单位 的 位 置 开 始 ， 它 上 面 有 多 个 新 变 登 加 来 创建 聚光灯 照射 在 木 地 板 
上 的 效果 。 舞 台 的 边 其 实 是 舞台 中 一 个 渐变 的 一 部 分 ， 它 还 告诉 你 如 何 使 
用 这 种 渐变 来 “ 画 ” 难 一 点 儿 的 边界 。 反 过 来 说 ， 光 照 大 部 分 都 是 透明 的 ， 
距离 中 心 越 近 ， 不 透明 度 越 高 ， 焦 点 偏 移 是 为 了 创建 聚光灯 从 一 个 角度 昭 
射 在 舞台 上 的 效果 。 这 是 一 个 柔和 的 聚光灯 ， 我 们 没有 明显 地 把 它 的 边 刻 
画 出 来 ， 而 是 隐藏 在 周围 的 黑暗 中 。 

下 一 层 由 左 侧 和 右 侧 的 幕布 组 成 ， 它 们 使 用 了 相同 核心 路 径 创建 的 形状 和 
一 个 非常 复杂 的 使 用 裙 皱 来 表示 光照 和 阴影 的 红色 / 红 褐色 图 案 。 右 侧 的 幕 































































































布 与 左 侧 的 完全 一 样 ， 只 是 进行 了 翻转 并 转换 到 与 屏幕 的 右 侧 对 齐 。 每 一 
侧 的 幕布 后 面 都 有 一 个 幕布 阴影 ， 它 们 是 由 相同 的 路 径 生 成 但 略微 有 一 些 
偏 移 ， 并 且 都 有 50% 的 不 透明 度 。 



































图 9-15; 使 用 SVG 创建 悬挂 幕布 的 舞台 


最 后 ， 顶 部 的 幕布 覆盖 在 其 他 幕布 之 上 ， 且 就 像 侧面 幕布 那样 使 用 非常 复 
杂 的 有 40 个 结 点 的 线性 渐变 填充 ， 这 是 通过 试验 和 排 错 确定 的 。 它 同样 有 
一 个 偏 移 的 阴影 。 


该 图 片 完 整 的 代码 如 例 9-8 所 示 。 
例 9-8 使 用 复杂 且 分 层 的 渐变 创建 一 个 舞台 


<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xLink" 
width="100%" height="100%" viewBox="0 © 1000 650" 
id="curtains" > 
<title xml: lang="en">Stage Curtains</title> 
<style type="text/css"> 
.curtain-shadow { 
fill: black; 
fill-opacity: 0.5; (2) 

















w 


.side-curtain { 
fill: url(#side-curtain-gradient) ; 





-ceiling-curtain { 
Fill: url(#ceiling-curtain-gradient) ; 
} 
</style> 
<defs> © 
<path id="curtain" transform="scale(@.55)" 
d="m 0.319,0 0.252,1000 c 0,0 -2.761,40 44.129,30 
46.9,-10 38.6,-20 46.9,-10 8.3,0 27.4,10 47.4,0 19,-21 63,10 63,10 
0,0 11,10 44,0 33,-10 58,0 58,0 0,0 19,40 52,20 33,-30 34, -30 
34,-30 L 390,-0.53 z"/> 
<path id="ceiling-curtain" transform="scale(1,0.5)" 
d="m 0,0 1000,0 0,180 c 0,0 -26,17 -49,9 -22,-9 
-48,-32 -57,-18 -8,15 -31,3 -54,-5 -23,-9 -20,45 -49,23 -28,-23 
-11,11 -34,0 -23,-12 -23,-32 -46,-18 -22,15 -17,-8 -37,-8 -20,0 
-25,23 -54,11 -29,-11 -43,-25 -49,-3 -5,23 -5,23 -28,0 -23,-22 
-46,6 -46,6 0,0 -28,12 -43,-3 -14,-14 -54,-8 -54,6 0,14 -23,20 
-31,3 -9,-17 8,26 -29,8 -37,-17 -11,-34 -40,-17 -29,17 -49,-3 
-63,-5 -14,-3 -14,37 -28,25 -15,-11 -9,-14 -32,-17 -23,-3 -28,37 
-46,23 C 114,186 120,157 106,169 91.4,180 85.7,214 74.3,203 
62.9,1912 60,171 48.6,177 37.1,183 25.7,203 25.7,203 L 2.86,177 C 
0,171 0,0 0,0 z"/> 
<linearGradient id="side-curtain-gradient"> @ 
<stop stop-color="#800000" offset="0"/> 
<stop stop-color="#c00000" offset="0.08"/> 
<stop stop-color="#e00000" offset=".15"/> 
<stop stop-color="#800000" offset="0.24"/> 
<stop stop-color="#400000" offset="0.26"/> 
<stop stop-color="#600000" offset="0.28"/> 
<stop stop-color="#800000" offset="0.30"/> 
<stop stop-color="#c00000" offset="0.33"/> 
<stop stop-color="#800000" offset="0.41"/> 
<stop stop-color="#c00000" offset="0.56"/> 
<stop stop-color="#800000" offset="0.75"/> 
<stop stop-color="#400000" offset="0.82"/> 
<stop stop-color="#800000" offset="0.89"/> 
<stop stop-color="#C00000" offset="0.94"/> 
<stop stop-color="#800000" offset="1"/> 
</lLinearGradient> 
<linearGradient id="ceiling-curtain-gradient"> 
<stop stop-color="#400000" offset="0"/> 
<stop stop-color="#700000" offset="0.013"/> 
<stop stop-color="#800000" offset="0.013"/> 
<stop stop-color="#C00000" offset="0.03"/> 
<stop stop-color="#D00000" offset="0.04"/> 
<stop stop-color="#C00000" offset="0.05"/> 
<stop stop-color="#600000" offset="0.065"/> 
<stop stop-color="#B00000" offset="0.078"/> 
<stop stop-color="#D00000" offset="0.09"/> 





<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 


stop-color="#800000" 
stop-color="#A00000" 
stop-color="#D00000" 
stop-color="#C00000" 
stop-color="#600000" 
stop-color="#D00000" 
stop-color="#800000" 
stop-color="#C00000" 
stop-color="#600000" 
stop-color="#800000" 
stop-color="#C00000" 
stop-color="#800000" 
stop-color="#D00000" 
stop-color="#800000" 
stop-color="#E00000" 
stop-color="#A00000" 
stop-color="#D00000" 
stop-color="#800000" 
stop-color="#D00000" 
stop-color="#800000" 
stop-color="#D00000" 
stop-color="#800000" 
stop-color="#C00000" 
stop-color="#D00000" 
stop-color="#800000" 
stop-color="#C00000" 
stop-color="#E00000" 
stop-color="#800000" 
stop-color="#C00000" 
stop-color="#E00000" 
stop-color="#800000" 
stop-color="#C00000" 


</linearGradient> 


<linearGradient id="stageGradient" x2="0" y2="1"> 


<LinearGradient id="shadowGradient" x2="0" 


offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 


12"/> 
135" /> 
145"/> 
16"/> 
19” Js 
21"/> 
24" /> 
28" /> 
32"/> 
33"/> 
34" /> 
37" ES 
39" /> 
42" /> 
46" /> 
51"/> 
55"/> 
57"/> 
61"/> 
67"/> 
69" /> 
71"/> 
74" [> 
76" /> 
78" /> 
80" /> 
83" /> 
86" /> 
88" /> 
91" /> 
94" /> 


offset="1"/> 


<stop stop-color="#100800" offset="0"/> 


<stop stop-color="saddleBrown" offset="0.97"/> 


<stop stop-color="#A06020" offset="0.97"/> 
<stop stop-color="saddleBrown" offset="1"/> 
</linearGradient> 


<stop stop-opacity="0.6" offset="0" /> 
<stop stop-opacity="0" offset="0.97"/> 
</linearGradient> 
<radialGradient id="spotlightGradient" cy="0.9" fy="0.6"> 


<stop stop-color="#FFFFFF" offset="0" 


stop-opacity="0.4"/> 


<stop stop-color="#FFFFFF" offset="0.35" 


stop-opacity="0.1"/> 


© 


y2="1"> QO 
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<stop stop-color="#000000" offset="1" 
stop-opacity="0"/> (7) 
</radialGradient> 


<rect id="stage" width="1000" height="330" y="260" /> 
</defs> 


<rect id="background" width="100%" height="100%" 
fill="black"/> 


<g id="stage-illuminated"> 
<use xlink:href="#stage" fill="url(#stageGradient)"/> 
<use xlink:href="#stage" fill="url(#shadowGradient)"/> 
<use xlink:href="#stage" fill="url(#spotlightGradient)"/> 


</g> 


<g id="side-curtain-left" > © 
<use xlink:href="#curtain" class="curtain-shadow" 
x="-1" y="3"/> 
<use Xlink:href="#curtain" class="side-curtain"/> 


</g> 

<g id="side-curtain-right" 
transform="translate(1000,0) scale(-1,1)"> © 
<use xlink:href="#side-curtain-left"/> 

</g> 

<g id="ceiling-curtain"> D 


<use Xlink:href="#ceiling-curtain" class="curtain-shadow" 
x="5" y="5" /> 
<use xlink:href="#ceiling-curtain" 
class="ceiling-curtain"/> 
</g> 
</svg> 
O <svg> 元 素 上 的 id 使 整个 场景 可 以 在 另 一 个 图 片 (虽然 你 必须 把 标记 
导入 到 其 他 文件 中 使 所 有 样式 能 够 在 Web 浏览 器 中 正常 工作 ) 中 重复 
使 用 。 


O 幕布 的 fill 值 使 用 CSS 规则 来 设置 。 特 别 是 幕布 的 阴影 ， 它 是 简单 地 
通过 使 用 半 透 明 的 黑色 渐变 进行 填充 来 代替 的 。 


© 两 个 复杂 的 path 元 素 ， 一 个 是 侧 边 的 幕布 ， 另 一 个 是 天 花 板 下 幕布 的 边 
缘 。 它 们 都 没有 直接 设置 样式 属性 ， 而 是 在 使 用 <use> 元 素 复制 时 添加 


O 表示 幕布 的 前 两 个 <LinearGradient> 对 象 设计 过 程 中 尽量 与 <path> 元 素 
匹配 。 许 多 SVG 图 片 编辑 器 都 有 可 视 化 工具 来 使 这 项 工作 更 加 容易 ， 当 
然 有 一 些 不 足 之 处 也 是 不 可 避免 的 。 











加 











© pl GU Ra o 第 一 个 是 从 上 到 下 填充 木 制 的 颜色 ， 在 底部 
绘制 舞台 边缘 的 地 方 有 一 个 锐利 的 过 渡 。 


QO shadowGradient 使 用 默认 的 黑色 stop-color， 然 后 调整 stop-opacity 而 
不 是 创建 额外 的 层 作为 舞台 从 后 到 前 (长 方形 从 上 到 下 ) 的 阴影 。 把 它 
应 用 为 单独 的 一 层 是 为 了 方便 之 后 通过 色相 来 调整 亮度 


O 创建 聚光灯 的 <radialGradient> 同样 布局 在 舞台 之 上 ， 所 以 它 同样 使 用 
了 stop-opacity 属性 来 允许 下 面 的 层 露出 来 。 


O 在 绘制 一 个 纯 黑 色 背 景 之 后 ， 舞 台 还 使 用 相同 的 长 方形 绘制 三 次 ， 来 布 
局 三 个 不 同 的 渐变 。 这 个 完美 的 使 用 分 层 填充 的 例子 表达 了 对 SVG 2 的 
功能 的 迫切 期 待 一 一 它 将 允许 舞台 绘制 在 单独 的 形状 上 ， 然 后 三 个 渐变 
一 起 填充 。 


O 左 侧 的 幕布 是 通过 一 起 布局 两 个 版 本 的 幕布 形状 进行 绘制 ， 一 个 添加 了 
阴影 样式 ， 另 一 个 是 幕布 的 主要 样式 。 


O 右 侧 的 幕布 通过 复制 和 转换 左 侧 的 幕布 来 绘制 。 
@ 国 最 后 ， 天 花 板 上 的 幕布 使 用 同样 的 布局 方法 绘制 。 


虽然 例 9-8 中 包含 许多 代码 ， 但 相 较 于 本 书 中 的 大 多 数 例子 ， 它 作为 图 片 
文件 依然 是 相对 较 小 的 : 可 编辑 的 文本 有 7KB， 通 过 gzip 压缩 之 后 只 剩 下 
1.4KB。 相 比 而 言 ， 相 同 图 片 的 PNG 版 本 ， 要 想 填 满 桌面 显示 的 大 部 分 区 
tk, 要 超过 80KB 的 大 小 。 


























颜色 弹性 过 渡 的 网 格 渐变 

兽人 台 与 幕布 的 例子 既 优雅 ， 也 非常 便于 使 用 Bye ie BE GR ATE 
好 是 平行 的 ， 所 以 正好 使 用 线性 渐变 。 但 在 普遍 情况 下 ， 这 样 的 描述 往往 
并 不 准确 ， 对 象 的 颜色 和 阴影 会 BRENTA LETER 而 不 只 是 平行 线 
或 顶 圆 。 目 前 ， 不 管 重建 何 种 类 别 的 复杂 阴影 图 案 ， 你 只 能 同时 布局 多 种 
不 同 的 半 延 明 渐 变 。 

SVG 2 中 引入 了 一 个 描述 复杂 二 维 颜色 过 渡 的 方法 ， 我 们 称 之 为 网 格 渐变 。 
网 格 是 直线 或 曲线 交叉 形成 的 格子 。 渐 变 颜 色 的 结 点 被 分 配 到 这 些 路 径 的 
交点 上 上， 渐变 的 每 一 片 (四 条 曲线 围 起 来 的 区 域 ) 的 颜色 也 是 基于 它们 的 
值 来 插入 。 你 可 能 不 会 通过 手动 编码 来 生成 网 格 渐变 ，Adobe Illustrator 和 
Inkscape 已 经 支持 渐变 网 格 的 创建 ， 并 且 SVG 提案 的 设计 也 是 兼容 它们 的 。 





网 格 渐变 太 复 杂 了 ，CSS 还 没有 与 之 对 应 的 候选 渐变 函数 。 但 是 ，CSS 
Image Values and Replaced Content Module Level 4 中 引入 了 一 个 更 加 易于 
管理 的 新 的 渐变 函数 conic-gradient()， 以 及 它 的 变形 repeating-conic- 
gradient() 。 


锥 形 渐 变 是 一 种 颜色 会 随 着 你 围绕 中 心 点 做 圆周 运动 而 改变 的 渐变 ， 每 一 
种 颜色 都 沿 着 从 中 心 点 发 散 出 来 的 射线 尽 可 能 地 扩展 。 不 同 于 径 向 渐变 ， 
径 向 渐变 的 颜色 是 沿 着 焦点 发 散 的 射线 而 改变 ， 而 在 同心 圆 上 是 一 样 的 。 
锥 形 渐变 的 结 点 不 是 通过 固定 的 距离 而 定义 ， 而 是 通过 固定 的 角度 来 定义 。 
提议 的 CSS 语法 将 使 用 at 关键 词 (可 选 ) 来 描述 中 心 点 的 位 置 (默认 情况 
下 ， 是 图 片 的 中 心 )， 这 与 径 向 渐变 的 语法 相同 。 接 着 是 结 点 的 列表 ， 偏 移 
使 用 角度 单位 或 整个 圆 的 百分比 来 描述 。 零 度 表 示 的 是 从 中 心 点 朝 上 的 重 
BR. 0 ~ 360° 之 外 的 角度 将 会 被 裁剪 。 与 其 他 CSS 渐变 一 样 ， 没 有 定 
义 偏 移 值 的 颜色 结 点 将 均匀 分 配 。 


下 面 列 出 了 一 些 合法 的 锥 形 渐变 语法 : 


/* a hue color wheel */ 
conic-gradient(red,yellow, lime,cyan,blue,magenta,red); 


/* oscillating orange rays */ 
repeating-conic-gradient(at top left, 
tomato, gold 10deg); 


/* checkerboard */ 
conic-gradient(black 0 25%, white 25% 50%, 
black 50% 75%, white 75% 100%); 


最 后 一 个 例子 使 用 另 一 种 在 4 级 规范 中 介绍 的 简写 方式 ， 它 将 适用 于 所 有 
的 CSS 渐变 函数 。 当 一 个 渐变 包括 一 个 纯色 区 域 时 ， 你 可 以 列 出 单独 颜色 
值 的 两 个 偏 移 ， 而 不 一 定 非 要 定义 连续 两 个 颜色 相同 的 结 点 。 


编写 本 书 时 ， 锥 形 渐变 在 任何 浏览 器 中 者 没有 直接 支持 。Lea Verou，CSS 
工作 组 的 一 员 ， 创 建 了 一 个 JavaScript polyfill， 使 用 HTML canvas 把 锥 形 
渐变 的 声明 转变 为 静态 图 片 。 

因为 CSS 渐变 函数 将 可 以 直接 在 SVG 2 中 使 用 ， 所 以 目前 没有 创建 专门 的 


SVG 狼 形 渐变 元 素 的 计划 。 但 是 相同 的 〈 或 者 非常 接近 的 ) 效果 可 以 使 用 
网 格 渐变 来 创建 。 
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磁 贴 与 纹理 


在 第 5 章 介绍 演 染 服务 时 ， 我 们 提 到 你 可 能 希望 使 用 多 种 不 同 的 资源 来 绘 
制 一 个 形状 : 单一 的 颜色 、 一 个 或 多 个 渐变 、 重 复 图 案 、 位 图 、 文 本 ， 甚 














至 是 其 他 SVG 文件。 到 目前 为 止 














， 我 们 已 经 介绍 了 如 何 使 用 纯色 或 单个 渐 


变 来 进行 绘制 。 对 于 所 有 其 他 可 能 的 选项 ， 我 们 都 将 使 用 一 个 单独 的 泻 染 


服务 元 素 : <pattern>。 





一 个 SVG 图案 定义 了 一 个 可 作为 其 他 形状 的 泻 染 服务 的 SVG 图形 块 。 我 


们 可 以 使 用 任何 SVG 内 容 ， 包 括 





图 片 、 文 本 以 及 使 用 渐变 填充 的 形状 。 图 


案 是 一 种 重复 矩形 (或 转换 后 的 矩形 ) 磁 贴 (tile) 的 布局 。 你 也 可 以 制作 
一 个 形状 相同 大 小 的 单个 磁 贴 来 创建 一 个 没有 重复 的 填充 ， 这 为 我 们 提供 
了 更 多 的 可 能 ， 在 第 11 章 中 将 分 别 进行 讨论 。 


有 多 种 可 选 方案 来 设置 磁 贴 和 图 案 内 容 的 大 小 。 这 使 得 许多 不 同 的 设计 成 





为 可 能 ， 但 也 有 些 依然 很 难 实现 。 


本 章 会 试图 讲解 什么 可 以 实现 而 什么 无 


法 实现 ， 并 且 给 一 些 不 尽 如 人 意 的 情况 提供 了 变通 方案 。 我 们 也 比较 了 





图 案 。 
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SVG 图 案 和 重复 CSS 背景 图 片 ， 后 者 是 许多 Web 设计 师 都 熟悉 的 一 种 重复 

















10-1: 使 用 简单 的 重复 条 纹 图 案 填充 的 形 ; 


10.1 RR 


许多 时 候 ，<pattern> 元 素 与 前 儿童 介绍 的 渐变 很 相似 。 元 素 本 身 的 属性 定 
义 了 形状 以 及 图 案 磁 贴 (重复 单元 ) 的 尺寸 。<pattern> 的 子 内 容 组 成 了 绘 
制 到 屏幕 上 的 图 形 。 


<linearGradient> 和 <radialGradient> 上 的 属性 分 别 与 <Ltne> 和 <circle> 
匹配 ， 而 <pattern> 上 的 几何 属性 与 <rect> 或 <image>: x, y, width 和 
height 类 似 。 它 们 的 默认 值 都 是 0， 通常 情况 下 ，width 或 height 为 0 时 内 
容 不 会 被 绘制 。 


为 了 理解 图 案 是 如 何 工作 的 ， 最 好 的 做 法 是 先 运 行 一 个 示例 。 例 10-1 给 出 
了 一 个 简单 的 条 纹 图 案 的 代码 ， 并 用 它 填 充 了 两 个 形状 。 图 10-1 显示 了 运 
行 结果 。 
例 10-1 使 用 简单 的 重复 条 纹 图 案 填充 形状 

<svg xmLns="http://www.w3.org/2000/svg" 


xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="4in" height="3in" > 
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<title xml: lang="en">Striped Pattern</title> 
<style type="text/css"> 
svg { 
stroke-width: 6px; 


</style> 

<pattern id="stripes" x="5%" width="10%" height="100%"> 
<line x1="3" x2="3" y2="100%" stroke="maroon" /> 
<line x1="9" x2="9" y2="100%" stroke="gold" /> 
<line x1="15" x2="15" y2="100%" stroke="tomato" /> 

</pattern> 


<g stroke="royalBlue" fill="url(#stripes) "> 
<rect x="0.1in" y="0.1in" width="3.8in" height="1in" /> 
<ellipse cx="50%" cy="2.1in" rx="1.2in" ry="0.8in" /> 
</g> 
</svg> 


图 案 本 身 通 过 如 下 代码 声明 : 


<pattern id="stripes" x="5%" width="10%" height="100%"> 


id 属性 ， 和 其 他 泻 当 服务 一 样 是 必需 的 ， 这 样 图 案 才 能 使 用 。wtdth 和 
height 属性 定义 了 每 个 重复 磁 贴 的 尺寸 。 磁 贴 从 水 平 偏 移 x 和 垂直 偏 移 y 
(这 里 使 用 默认 的 0) 的 点 开始 排列 。(x,y) 点 定义 了 被 引用 的 磁 贴 左上 角 
的 位 置 ， 剩 下 的 磁 贴 之 后 再 上 下 左右 重复 多 次 来 填充 形状 。 

BBA width, height, x. y 是 如 何 计量 的 呢 ? 再 看 图 10-1， 注 意 两 个 形状 的 
不 同 之 处 。 两 个 形状 条 纹 的 宽度 是 一 样 的 ， 但 是 椭圆 中 条 纹 之 间距 离 更 近 。 
很 明显 宽度 不 是 一 个 绝对 值 。 


默认 情况 下 ， 控 制图 案 磁 贴 尺寸 的 属性 是 基于 objectBoundingBox 单位 来 计 
算 的 。 每 块 磁 贴 占 满 边界 盒 的 高 度 (100%)， 但 宽度 只 占 10%。 无 论 形状 
有 多 宽 ， 它 都 会 有 10 条 间隔 开 的 条 纹 。 

根据 渐变 中 的 经 验 ， 你 可 能 已 经 猜 到 磁 贴 默认 的 对 象 边界 盒 尺 寸 可 以 修改 


为 userSpaceonuse. 






































相关 的 属性 是 patternunits, 10.2 节 将 会 讲解 改变 它 后 所 产 
生 的 效果 。 


x 和 y 偏 移 也 是 基于 边界 盒 来 测量 的 。 在 例 10-1 中 ，5% 的 水 平 偏 移 是 10% 
的 磁 贴 宽度 的 一 半 。 这 样 第 一 个 完整 的 条 纹 会 从 边界 盒 的 左上 角 移 动 5% 的 
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距离 。 但 图 案 仍然 会 在 所 有 的 方向 上 进行 重复 : 在 椭圆 中 ， 你 在 左 侧 能 
到 另 一 个 条 纹 的 边缘 ， 这 是 因为 磁 贴 内 条 纹 的 宽度 大 于 5% 的 偏 移 。 

因此 ， 条 纹 本 身 并 没有 基于 对 象 边 界 盒 按 比例 缩放 。 默 认 情 况 下 ， 图 和 案 的 
内 容 是 基于 userSpace0nuUse 坐标 系 ( 即 实际 上 是 被 填充 形状 的 坐标 系 ) 计 
量 的 。 该 坐标 系 的 原点 被 变换 到 每 个 磁 贴 的 左上 角 。 


图 案 图 形 的 缩放 是 受到 <pattern> 元 素 上 的 patternContent- 
Units 属性 控制 的 。 它 的 默认 值 是 userSpaceonuse， 另 一 个 
可 选 值 是 objectBoundingBox。 









































条 纹 (三 个 <Line> TH) 被 扩展 到 SVG 整个 高 度 的 100%， 比 实际 所 需 
还 要 长 得 多 。 根 据 SVG 1.1 的 规范 ， 为 了 有 效 地 填充 形状 ， 图 案 应 该 使 用 
100% 的 值 。 然 而 ， 正 如 第 7 章 中 提 到 的 那样 ， 当 形状 岁 套 在 使 用 不 同 泻 染 
服务 的 SVG 元 素 中 时 ， 用 户 空间 单位 在 不 同 浏览 器 之 间 的 实现 是 不 一 致 的 。 
对 于 许多 图 案 的 设计 ， 有 必要 使 它 超出 图 形 的 大 小 来 确保 整个 磁 贴 都 被 
填充 ， 而 不 必 关 心 要 填充 的 形状 的 尺寸 是 多 少 。 图 案 元 素 默 认 会 设置 
overflow: hidden， 使 图 形 被 裁剪 到 磁 贴 的 大 小 。 


SVG 1.1 和 2 中 对 于 图 案 有 意 不 定义 使 其 可 见 的 overflow 
值 ， 以 此 来 应 对 SVG 1 中 实现 的 不 一 致 性 。 这 意味 着 每 个 浏 
览 器 都 可 以 用 它们 选择 的 方式 去 处 理 。 因 此 建议 一 般 不 要 去 
修改 它 的 值 。 






























































例 10-2 给 出 了 一 个 更 加 实际 的 例子 ， 使 用 的 图 案 会 基于 边界 盒 缩 放 ， 但 条 
纹 不 会 。 它 使 用 了 图 案 把 一 个 长 方形 分 割 为 固定 数量 的 相同 块 ， 每 一 个 都 
有 一 个 很 细 的 网 格 线 作 为 轮廓 。 这 种 覆盖 的 网 格 是 图 像 编 辑 软件 中 的 一 个 
常用 工具 ， 这 里 它 显 示 在 一 个 非常 简化 的 Web 应 用 中 ， 且 覆盖 在 一 个 图 片 
上 面 。 

为 了 证 实 图 案 磁 贴 的 缩放 效果 ， 照 片 的 缩 略 图 同样 包含 在 它 自己 的 网 格 中 。 
缩 略 图 上 的 网 格 更 小 一 些 ， 但 是 网 格 线 的 宽度 相同 。 在 这 两 个 例子 中 ， 实 
际 绘制 的 线 比 我 们 需要 的 宽 得 多 ,通过 隐藏 溢出 部 分 来 把 它 调 整 到 适合 的 
宽度 。 完 整 的 效果 如 图 10-2 所 示 。 
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Show Grid: 
© None © 2x2 ® 3x3 

















10-2: 以 相同 的 3 x 3 的 图 案 网 格 填充 不 同 尺寸 的 长 方形 


例 10-2 图 像 编 辑 应 用 内 的 一 个 大 小 可 变 的 网 格 图 案 
HTML 标记 和 JavaScript: 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8" /> 
<title>Photo Grid Overlay</title> 
<style type='text/css'> 
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/* styles must be in the same document */ 
</style> 
</head> 
<body> 
<fieldset id="grid-options" 
role="radiogroup" aria-controls="graphics"> 


<legend>Show Grid:</lLegend> (1) 

<label> 
<input type="radio" name="grid" value="none" checked> 
None</label> 

<label><input type="radio" name="grid" value="grid4"> 
2&times ;2</label> 

<label><input type="radio" name="grid" value="grid9"> 
3&times ; 3</label> 

</fieldset> 


<svg id="graphics" viewBox="0 0 400 400"> 
<title>Photo View</title> 
<pattern id="grid4" width="50%" height="50%" > (2) 
<g stroke="gold" stroke-width="4px"> 


<line x2="100%" /> © 
<line y2="100%" /> 
</g> 
</pattern> 


<pattern id="grid9" xlink:href="#grid4" 
width="33.33333%" height="33.33333%" /> @ 


<g> 
<title>Full image</title> 
<image width="400" height="300" 
xlink:href="cat.jpeg" /> 
<rect width="400" height="300" class="grid" /> © 
</g> 
<g transform="translate(140,310)"> 
<title>Thumbnail</title> 
<image width="120" height="90" 
xLink:href="cat. jpeg" /> 
<rect width="120" height="90" class="grid" /> 


</g> 
</svg> 
<script> 
document.getElementById("grid-options") 
.addEventListener("change", updateGrid); O 


function updateGrid(e) { 
var svg = document.getElementById("graphics"), 

radio = e.target; 

if (radio.checked) { 
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svg.setAttribute("class", radio.value); @ 


} 
} 
</script> 
</body> 
</html> 


@ 初始 的 HTML 标记 设置 了 一 个 小 的 表单 Field 来 用 于 选择 网 格 。 

O 内 联 SVG 代码 定义 了 <pattern> 元 素 。 图 案 使 用 默认 的 patternunits ix 
a: 图 案 磁 贴 的 宽 和 高 是 相对 于 边界 盒 的 百分比 。 

O 然而 它 的 内 容 是 绘制 在 用 户 空间 坐标 系 内 的 。 它 由 两 条 线 (组 合 在 一 起 
来 应 用 通用 的 样式 ) 组 成 ， 每 条 线 都 从 原点 开始 ， 然 后 沿 着 水 平 或 垂直 
方向 延伸 SVG 宽 或 高 的 长 度 ， 通 常 这 会 超出 图 案 磁 贴 的 边缘 。 


O 第 二 个 图 案 通 过 简写 的 方式 定义 ， 使 用 xlink:href 引用 了 第 一 个 图 案 ， 
RERET width 和 height 属性 的 值 。 和 渐变 一 样 ，xlink:href 属性 允 
许 一 个 <pattern> 元 素 作 为 其 他 元 素 的 模板 。 

O 剩 下 的 SVG 代码 描述 的 是 可 见 内 容 : 元 素 以 及 一 个 与 之 对 应 的 作为 网 
格 容器 的 元 素 。 

QO 简短 的 JavaScript 代码 段 用 于 监听 单 选 按钮 的 改变 。 

O 一 个 简单 的 函数 用 于 改变 <svg> 元 素 上 的 class， 来 使 用 合适 的 CSS 样 
式 。 在 这 个 简单 的 例子 中 ，setAttribute 方法 用 于 取消 之 前 设置 的 类 而 
给 它 应 用 一 个 新 的 类 。 对 于 更 加 复杂 的 应 用 程序 ， 在 操作 时 你 可 能 需要 
更 加 小 心 以 不 影响 其 他 的 类 。 

CSS 样式 : 


body { 
padding: 0.5em 0.25em; 
background-color: lightGray; 



































} 
fieldset { 
display: block; 
background-color: white; 
margin-bottom: 1em; (1) 
} 
legend { 
background-color: inherit; 
border-radius: 0.25em; 
padding: 0 0.2em; 
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svg { 
width: 100%; 
min-height: 300px; 


max-height: 100vh; (2) 
shape-rendering: crispEdges; 
} 
.grid { 
fill: none; 
pointer-events: none; © 


.grid4 .grid { 
fill: url(#grid4); (4) 
} 
.grid9 .grid { 
fill: url(#grid9); 
} 


@ 最 初 的 几 个 CSS 规则 控制 网 页 和 表单 元 素 的 整体 布局 。 

O <svg> 元 素 设置 了 最 小 高 度 和 最 大 高 度 ， 但 是 在 最 新 的 浏览 器 中 它 会 
根据 viewBox 属性 设置 的 宽 高 比 来 自动 调整 大 小 。shape-rendering: 
crispEdges 设置 关闭 矢量 图 形 的 抗 锯齿 效果 ， 否 则 可 能 会 使 网 格 线 看 起 
来 比较 模糊 。 

© 添加 grid 类 的 长 方形 将 默认 不 进行 填充 。pointer-events E ELWA 
有 填充 都 没有 交互 效果 。 


© 当 grid4 或 grid9 类 添加 到 父 元 素 上 时 ， 网 格 和 矩形 将 使 用 合适 的 图 案 来 
填充 ， 通 过 一 个 匹配 的 id 来 区 分 。 


最 终 的 效果 满足 了 基本 功能 ， 但 是 并 不 理想 。 网 格 线 使 用 4px 的 描 边 宽度 ， 
但 是 一 半 宽 度 将 被 裁剪 掉 ， 因 为 描 边 的 中 心 在 网 格 磁 贴 的 边缘 线 上 。 这 就 
意味 着 我 们 只 能 看 到 矩形 上 边 和 左边 的 网 格 线 ， 而 看 不 到 右边 和 下 边 的 网 
格 线 。 因 此 交点 没有 完全 匹配 到 照片 宽 高 在 几何 上 的 平分 点 或 三 等 分 点 。 
SVG 图 案 中 没有 可 以 固定 它 的 简单 方式 。 当 我 们 给 磁 贴 尺寸 使 用 对 象 边界 
盒 单位 时 ， 你 无 法 通过 给 磁 贴 设置 固定 像素 的 偏 移 来 弥补 这 种 不 平衡 ， 因 
为 x 和 y 也 是 基于 边界 盒 单位 解析 的 。 并 且 由 于 网 格 线 是 基于 用 户 空间 单 
位 绘制 的 ， 所 以 没有 办 法 在 每 个 磁 贴 相对 的 边 上 设置 额外 的 线 。 


10.2 ”适当 拉 伸 


基于 默认 的 objectBoundingBox 单位 的 图 案 磁 贴 和 userSpaceOnUse 单位 的 图 
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案 内 容 设计 的 能 够 工作 良好 的 图 案 只 占 一 小 部 分 。 对 于 除了 细 条 纹 和 网 格 
= é 案 ， 你 通常 希望 图 形 缩放 到 与 图 案 磁 贴 相 匹配 的 大 小 。 换 名 话说， 你 

望 的 是 patternUnits 和 patternContentUnits 这 两 个 属性 有 相同 的 值 ， 
ie seen 或 userSpaceOnUse 都 可 以 。 


由 于 默认 值 不 匹配 ， 你 通常 只 需要 声明 其 中 一 个 。 设 置 


patternUnits = "userSpaceOnUse" 或 patternContentUnits = 























"objectBoundingBox"。 














当 图 案 磁 贴 和 它 的 内 容 都 是 基于 对 象 边界 盒 缩 放 时 ， 你 会 创建 一 个 能 适应 
被 填充 形状 的 图 案 。 每 个 盒子 中 的 磁 贴 的 数量 通常 都 是 相同 的 ， 整 个 图 案 
会 一 起 放大 或 缩小 。 


当 你 使 用 对 象 边 界 盒 单 位 时 ， 要 记 住 第 7 章 中 坐标 系 被 扭曲 的 教训 。 如 果 
盒子 不 是 正方 形 ， 坐 标 系 将 变 得 不 均匀 ， 水 平 单位 和 垂直 单位 会 不 相等 。 
圆 、 文 本 、 图 片 都 会 被 拉 伸 ， 旋 转 的 角度 也 不 均匀 。 还 要 注意 的 是 所 有 的 
一 切 都 会 根据 新 的 单位 来 缩放 ， 包 括 描 边 宽度 和 字体 大 小 。 

此 外 ， 对 于 patternContentUnits， 不 同 于 图 案 磁 贴 的 尺寸 ， 它 的 百分比 值 


不 可 以 与 小 数 互 换 。 基 于 用 户 空间 坐标 系 定义 的 100% 会 按 比例 放大 到 其 他 
单位 的 缩放 效果 。 
































无 论 使 用 什么 缩放 方式 ， 图 案 内 容 的 百分比 值 都 不 会 参考 图 
案 磁 贴 。 











如 果 主 视窗 宽 200 个 单位 (1% 是 2 个 水 平 单位 ) 高 150 个 单位 (1% 是 1.5 
个 垂直 单位 )， 在 缩放 的 坐标 系 中 1% 不 是 盒 宽 的 2 倍 、 盒 高 的 1.5 倍 。 在 
不 同 的 SVG 中 ， 比 例 是 不 相同 的 。 

它 通 常 没有 什么 用 处 ， 所 以 当 图 案 内 容 使 用 对 象 边界 盒 单 位 时 ， 要 尽量 避 
免 使 用 百分比 。 

当然 ， 你 可 以 使 用 小 数 ， 此 时 它 是 相对 于 边界 盒 宽 或 高 的 比例 。 


例 10-3 使 用 这 种 方法 来 调整 例 10-1。 现 在 彩色 条 纹 的 宽度 和 间距 都 会 被 缩 
放 来 适应 不 同 的 形状 ， 如 图 10-3 所 示 。 
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图 10-3; 基于 边界 念 缩放 的 重复 条 纹 图 案 填 充 的 形状 
例 10-3 使 用 缩放 的 重复 条 纹 图 案 填 充 形状 


<svg xmlns="http: //www.w3.org/2000/svg" 


xmlns:xLink="http: //www.w3.org/1999/xLink" 
width="4in" height="3in" > 
<title xml: lang="en">Bounding Box Striped Pattern</title> 
<style type="text/css"> 
svg { 
stroke-width: 6px; 
} 


</style> 
<pattern id="stripes2" x="5%" width="10%" height="100%" 
patternContentUnits="objectBoundingBox" 
stroke-width="0.025px" > (1) 
<line x1="0.0125" x2="0.0125" y2="1" stroke="maroon" /> 
<line x1="0.0375" x2="0.0375" y2="1" stroke="gold" /> @ 
<line x1="0.0625" x2="0.0625" y2="1" stroke="tomato" /> 
</pattern> 
<g stroke="royalBlue" fill="url(#stripes2)"> 
<rect x="0.1in" y="0.1in" width="3.8in" height="1in" /> 
<ellipse cx="50%" cy="2.1in" rx="1.2in" ry="0.8in" /> 
</g> 


</svg> 
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O 在 图 案 上 明确 设置 patterncontentunits A {AS patternUnits 的 默认 
值 相 匹配 。 图 案 内 容 将 继承 0.025px 的 描 边 宽度 ， 它 将 在 objectBoun- 
dingBox 中 解析 。 


O 线 的 坐标 同样 也 被 转换 为 对 象 边 界 盒 单 位 。 两 条 线 之 间 相 隔 0.025 个 单 
位 ， 第 一 条 线 以 图 案 磁 贴 边 的 宽度 的 一 半 为 中 心 。 三 条 线 加 上 与 之 大 小 
相等 的 间 隐 正好 是 0.1 个 单位 ， 或 者 说 是 边界 盒 宽度 的 10% (图 案 磁 贴 
的 确切 宽度 )。 

当 使 用 小 数 边界 盒 单 位 时 ， 通 常 最 简单 的 是 单独 使 用 数学 上 的 用 户 单位 ， 

不 要 受到 具体 单位 的 干扰 ， 因 为 它 将 脱离 它 在 现实 世界 的 意义 。 当 然 ， 你 

可 以 使 用 单位 ， 它 们 将 基于 用 户 单位 等 比例 缩放 ，stroke-width 的 值 可 以 

证 明 这 一 点 。 



































虽然 px 通常 可 以 与 SVG 用 户 单位 交换 (在 任何 坐标 系 中 )， 
但 是 Firefox (版 本 40) 在 stroke-width 定义 为 0.025px 时 ， 
会 四 舍 五 入 为 0.03px。 但 如 果 定 义 为 0.025 而 没有 单位 ， 它 
是 可 以 正确 演 染 描 边 的 。 








还 有 另 一 种 代替 方案 是 使 用 逐渐 变 小 的 小 数 作 为 坐标 。<pattern> 可 以 使 用 
viewBox 属性 来 给 每 个 磁 贴 定义 它 自 己 的 坐标 系 。 我 们 将 在 第 11 章 中 探讨 
viewBox 图 案 ， 以 及 对 象 边界 盒 图 案 的 更 多 用 途 ， 该 章 的 重点 是 创建 一 个 使 
用 单个 磁 贴 填充 整个 边界 盒 的 填充 内 容 。 


但 是 ， 对 于 重复 磁 贴 你 更 有 可 能 会 使 用 userSpaceOnUse 单位 。 


10.3 AARIA 


patternUnits 和 patternContentUnits (默认 ) 的 值 都 为 userSpace0nUse 时 ， 
你 可 以 创建 一 个 国定 尺寸 的 磁 贴 ， 每 个 磁 贴 里 面 都 有 一 个 固定 尺寸 的 图 形 。 
这 种 结果 更 接近 现实 世界 的 磁 贴 ， 你 可 能 会 使 用 它们 铺 地 板 或 墙壁 。 磁 贴 
不 会 根据 地 板 区 域 的 大 小 而 改变 ， 只 不 过 铺 满 空间 所 需 的 磁 贴 数量 不 同 。 


例 10-4 改编 了 例 10-1 中 相同 的 条 纹 图 和 案 ， 但 是 这 次 我 们 固定 条 纹 的 尺寸 而 
去 调整 磁 贴 数量 。 结 果 如 图 10-4 所 示 。 
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B 10-4: 基于 用 户 空间 单位 的 重复 条 纹 图 案 填 充 的 形状 
例 10-4 使 用 基于 用 户 空间 单位 的 重复 条 纹 图 案 来 填充 形状 


<svg xmLns="http://www.w3.org/2000/svg" 

xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="4in" height="3in" > 
<title xml: lang="en">UserSpace Striped Pattern</title> 
<style type="text/css"> 

svg { 

stroke-width: 6px; 
} 


</style> 
<pattern id="stripes3" x="12px" width="24px" height="10px" 
patternUnits="userSpaceOnUse"> 
<line x1="3" x2="3" y2="10" stroke="maroon" /> 


<line x1="9" x2="9" y2="10" stroke="gold" /> (2) 
<line x1="15" x2="15" y2="10" stroke="tomato" /> 
</pattern> 


<g stroke="royalBlue" fill="url(#stripes3)"> 
<rect x="0.1in" y="0.1in" width="3.8in" height="1in" /> 
<ellipse cx="50%" cy="2.1in" rx="1.2in" ry="0.8in" /> 
</g> 
</svg> 
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O 这 次 明确 设置 patternunits 的 值 与 patternContentUnits 的 默认 值 相 匹 
配 。 图 案 磁 贴 属性 重新 使 用 px 单位 来 定义 。 


O 线条 不 需要 拉 伸 到 SVG 高 度 的 100%， 因 为 我 们 知道 磁 贴 的 尺寸 ， 可 以 
设置 它 的 确切 值 。 

长 方形 和 椭圆 内 的 条 纹 不 仅 尺寸 相同 ， 而 且 完 美 对 齐 。 用 户 空间 图 案 磁 贴 
的 x 和 y 偏 移 是 相对 于 主 坐 标 系 的 原点 来 计算 的 ， 而 不 是 形状 边界 盒 的 角 。 
类 似 于 我 们 在 第 7 章 中 讨论 的 用 户 空 间 渐变 ， 这 可 以 创建 从 一 个 形状 到 另 
一 个 形状 一 致 的 泻 染 流 除非 形状 被 变换 。 

因为 图 案 磁 贴 和 图 案 内 容 基 于 相同 的 坐标 系 ， 我 们 可 以 创建 比 无 限 拉 伸 直 
线 更 复杂 的 图 案 。 在 磁 贴 的 中 心 放置 一 个 圆 ， 调 整 图 标的 大 小 使 它 恰好 贴 
满 磁 贴 ， 或 者 使 用 <image> 来 填充 磁 贴 。 


当 你 希望 图 案 中 相 邻 的 磁 贴 能 够 平滑 过 渡 ， 就 好 像 图 10-4 中 垂直 的 条 纹 那 
样 ， 通 常 最 好 的 做 法 是 使 图 形 稍 大 于 图 案 磁 贴 。 在 一 些 SVG 查看 器 中 ， 你 
可 能 会 看 到 例 10-4 中 的 代码 创建 的 每 个 图 案 磁 贴 都 有 或 深 或 浅 的 边缘 ， 这 
是 由 于 浏览 器 对 形状 的 像素 格 进行 四 舍 五 人 处 理 导致 的 。 把 每 个 条 纹 从 
y1="-1" 延长 至 y2="11”( 而 非 0 到 10) 通常 可 以 解决 这 个 问题 ， 线 条 超出 
部 分 的 端点 会 被 裁 据 。 

你 可 以 利用 裁剪 效果 来 创建 初 看 起 来 不 是 通过 长 方形 重复 磁 贴 生成 的 图 案 。 
你 可 以 重复 形状 ， 重 又 磁 贴 相对 的 边 ， 这 样 当 磁 贴 一 个 挨 着 一 个 排列 时 ， 
形状 看 起 来 就 是 一 个 个 图 案 循环 呈现 。 


图 10-5 显示 了 一 个 重合 鳞片 的 图 案 ， 就 好 像 热带 鱼 的 鱼鳞 。 虽 然 最 小 重复 
单元 是 一 个 交错 重合 的 圆 ， 但 你 可 以 通过 绘制 从 一 个 鳞片 的 中 心 到 下 一 个 
鳞片 的 中 心 然后 转向 侧 边 直接 向 下 的 正方 形 来 创建 一 个 简单 的 长 方形 重复 
图 和 案 ， 如 图 下 半 部 分 所 示 。 例 10-5 提供 了 图 案 的 代码 ， 包 括 重复 单元 的 放 
大 版 本 。 


例 10-5 使 用 重合 形状 创建 复杂 的 图 案 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xlink" 
width="4in" height="6.5in" viewBox="0 0 400 650"> 
<title xml: lang="en">Fish Scale Pattern</title> 
<style type="text/css"><! [CDATA[ 
.scale { 
fill: url(#scale-gradient) ; 
stroke: black; 













































































} 
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]]> </style> 
<defs> 
<radialGradient id="scale-gradient"> (1) 
<stop stop-color="#004000" offset="0"/> 
<stop stop-color="green" offset="0.85"/> 
<stop stop-color="yellow" offset="1"/> 
</radialGradient> 
<pattern id="scales-pattern" width="20" height="20" 
patternUnits="userSpaceOnUse" > (2) 
<g id="scales"> 
<circle class="scale" cx="0" cy="19" r="10"/> © 
<circle class="scale" cx="20" cy="19" r="10"/> 
<circle class="scale" cx="10" cy="9" r="10"/> @ 
<circle class="scale" cx="0"  cy="-1" r="10"/> 
<circle class="scale" cx="20" cy="-1" r="10"/> @ 
</g> 
</pattern> 
</defs> 
<rect width="400" height="400" fill="url(#scales-pattern)"/> @ 
<g transform="translate(200,525) scale(5) translate (-10,-10 )"> 
<use Xlink:href="#scales" /> 
<rect width="20" height="20" fill="none" 
stroke="deepSkyBlue" stroke-width="0.5"/> O 
</g> 
</svg> 


O <radialcradient> 用 于 填充 图 案 中 每 个 鳞片 。 


O 图 案 本 身 patternUnits 的 值 为 userSpace0nuse， 意 思 是 图 案 磁 贴 是 20px 
的 正方 形 ， 而 不 管 填充 形状 的 尺寸 。 


© 前 两 个 鳞片 分 别 以 图 案 磁 贴 下 边 的 角 为 中 心 。 

O 下 一 个 鳞片 近似 放置 在 磁 贴 的 中 心 ， 且 在 前 两 个 鳞片 的 上 边 。 然 而 ， 为 
了 避免 描 边 被 裁减 掉 ， 所 有 的 圆 都 向 上 移动 了 一 个 单位 。 

O 最 后 两 个 鳞片 以 磁 贴 上 边 的 角 为 中 心 。 它 们 会 覆盖 在 中 间 的 鳞片 之 上 ， 
且 与 磁 贴 下 面 一 行 的 鳞片 连 在 一 起 ， 且 同样 分 别 位 于 左边 和 右边 

O 图 形 中 上 边 的 长 方形 显示 的 是 图 案 连 续 填 充 的 鳞片 。 


O 图 形 的 下 半 部 分 ，<use> 元 素 复 制 了 一 份 五 个 鳞片 组 成 的 组 。 通 过 <g> 
元 素 上 的 transform 属性 ， 鳞 片 被 放大 五 倍 ， 之 后 给 磁 贴 添加 偏 移 使 它 
位 于 可 见 空间 的 中 心 。 

O HEH 20x20 的 长 方形 ， 同 样 绘制 在 被 放大 后 的 坐标 系 中 ， 它 描绘 
图 案 磁 贴 的 边界 轮廓 。 
































a 

















磁 贴 与 纹理 | 149 














10-5: 用 于 填充 长 方形 的 鱼鳞 (E) 以 及 重复 图 案 磁 贴 单元 (F) 
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通过 这 种 方式 可 以 构建 许多 图 案 ， 但 可 能 另外 需要 一 些 数学 知识 来 计算 它 
的 尺寸 。 你 可 以 标识 出 重复 图 案 在 水 平和 垂直 位 移 上 的 确切 位 置 ， 这 有 助 
于 描绘 图 案 块 最 终 的 外 观 。 它 就 是 你 最 终 图 案 磁 贴 的 边界 。 






































CSS 与 SVG 

重复 背景 图 片 
在 CSS 布局 中 ,可 以 通过 背景 图 片 来 创建 重复 图 案 。 因 此 图 案 内 容 可 以 通 
过 任何 有 效 的 CSS 图 片 类 型 来 创建 : AMAA, SVG BH AA CSS 渐变 。 
默认 情况 下 ， 图 片 会 在 水 平和 垂直 两 个 方向 上 重复 来 创建 类 似 于 SVG AR 
的 磁 贴 效果 。 
起 初 ，CSS 背景 图 片 通常 以 图 片 本 来 的 尺寸 来 绘制 。 类 似 于 用 户 空间 图 案 ， 
改变 元 素 背景 的 尺寸 会 改变 重复 单元 的 数量 ， 而 不 会 缩放 它们 。 对 于 大 型 背 
景 图 片 来 说 这 似乎 没有 什么 用 ， 这 时 我 们 更 希望 它 能 够 缩放 到 适合 元 素 的 大 
小 ， 对 于 所 有 的 渐变 (以 及 部 分 SVG AA) 也 没有 什么 用 ， 因 为 它们 本 身 没 
有 尺寸 。CSS Backgrounds and Borders Module Level 3 中 引入 了 background-size 
属性 ， 它 允许 每 个 背景 图 片 可 以 缩放 到 一 个 固定 尺寸 或 者 元 素 的 百分比 。 


相 比 于 SVG AR, CSS 背景 图 片 也 有 一 些 优点 。 


。 使 用 background-repeat 属性 可 以 让 背景 只 在 一 个 方向 上 重复 或 根本 就 
不 重复 。 

e background-size 属性 还 接受 一 个 auto 值 来 使 图 案 磁 贴 的 宽 或 高 缩放 到 
匹配 其 他 值 或 内 容 本 身 的 宽 高 比 。 

。 背景 可 以 有 多 层 ， 每 层 都 可 以 拥有 自己 的 尺寸 和 重复 设置 。 

正如 我 们 多 次 提 到 的 那样 ， 分 层 泻 染 服务 填充 将 在 SVG 2 中 加 入 。 在 第 11 

章 中 ,我 们 将 介绍 如 何 通 过 拼合 图 案 来 模拟 这 种 效果 。 重 复 的 控制 可 以 通 

过 创建 比 对 象 边界 金 更 宽 或 更 高 的 图 案 磁 贴 来 模拟 。 

使 用 CSS 背景 来 创建 图 案 效 有 果 的 主要 不 足 之 处 是 图 案 内 容 必 须 是 一 个 单独 

的 图 片 文件 (或 编码 为 data URI) ， 除 非 可 以 使 用 渐变 来 表示 。 虽 然 渐 变 可 

以 用 于 创建 块 和 条 纹 ， 但 在 一 些 浏览 器 中 其 泻 染 质量 明显 不 如 SVG 形状 。 


10.4 变换 磁 贴 


在 上 一 节 中 ， 我 们 介绍 了 如 何 通 过 在 每 一 个 磁 贴 内 包含 复杂 的 重复 单元 来 
创建 非 矩形 图 案 。 对 于 某 些 几何 图 案 ， 你 可 以 通过 使 用 坐标 系 变换 来 精简 
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代码 ， 同 时 实现 相同 的 效果 。 

patternTransform 属性 允许 旋转 、 倾 斜 、 缩 放 或 移动 图 案 。 变 换 不 仅 作 用 在 
图 案 的 内 容 ， 而 且 作用 在 整个 图 案 磁 贴 ， 作 用 在 磁 贴 端 到 端 平 铺 的 重复 图 案 。 
与 gradientTransform 类 似 ，CSS 变换 模块 重新 把 pattern- 
Transform 定义 为 一 个 表现 属性 ， 与 transform 样式 属性 意思 
相同 虽然 现在 任何 浏览 器 都 不 支持 。 














图 案 变换 使 得 创建 对 角 线 以 及 其 他 角度 的 图 案 变 得 很 容易 ， 不 需要 通过 三 
角形 学 来 计算 出 重复 的 线 之 间 精 确 的 水 平 或 垂直 距离 。 例 10-6 中 使 用 45 度 
的 旋转 来 创建 斜 的 细 条 纹 和 网 格 图 和 案 。 本 例 中 还 演示 了 使 用 图 案 作 为 另 一 
图 案 的 模板 的 多 种 方式 。 最 终结 果 如 图 10-6 所 示 。 


例 10-6 使 用 patternTransform 创建 对 角 图 案 


<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.0rg/1999/xlink" 
width="4in" height="4in" viewBox="0 © 400 400"> 
<title xml: lang="en">Pinstripe Patterns</title> 

















<defs fill="#444" stroke="LightSkyBlue"> 0 
<pattern id="pinstripe" patternUnits="userSpaceOnUse" 
width="30" height="30"> (2) 


<rect id="r" width="30" height="30" 
stroke="none" /> 

<line id="l" x1="15" y="0" x2="15" y2="30" 
fill="none" /> 


</pattern> 
<pattern id="diagonals" xlink:href="#pinstripe" 
patternTransform="rotate(45)" /> © 
<pattern id="grid" xlink:href="#pinstripe"> 
<use xlink:href="#r" /> @ 


<use xlink:href="#1l" /> 
<use xlink:href="#L" transform="rotate(90, 15, 15)"/> 


</pattern> 
<pattern id="diagonal-grid" xlink:href="#grid" 
patternTransform="rotate(45)" /> (5) 
</defs> 


<rect width="200" height="200" 
fill="url(#pinstripe)" /> 

<rect width="200" height="200" x="200" 
fill="url(#diagonals)" /> 

<rect width="200" height="200" y="200" 
fill="url(#diagonal-grid)" /> 

<rect width="200" height="200" x="200" y="200" 
fill="url(#grid)" /> 

</svg> 








@ 四 个 图 案 使 用 相同 的 配色 方案 ， 通 过 这 里 的 <defs> 元 素 设置 。 和 形状 一 














样 ， 图 案 和 其 他 浑 染 服务 会 从 它们 所 处 的 环境 继承 样式 。 





O BOW pinstripe 图 案 磁 贴 由 纯色 填充 的 正方 形 和 一 条 沿 着 中 心 垂 直 向 
下 的 线 组 成 。 磁 贴 相对 于 用 户 空间 坐标 系 的 尺寸 是 固定 的 。 


© diagonals 





图 案 复制 了 第 一 个 细 条 纹 图 案 ， 并 把 它 旋转 45 度 创建 了 对 角 线 。 


© grid 图 案 依然 使 用 pinstripe 图 案 元 素 作 为 模板 ， 并 继承 图 案 元 素 上 的 
属性 ， 但 它 通 过 复制 一 次 纯色 长 方形 和 两 次 线条 ， 并 把 其 中 一 条 旋转 90 


度 来 替换 





图 案 的 内 容 。 与 渐变 一 样 ， 只 要 <pattern> AFAR, EMS 


替换 模板 的 所 有 内 容 。 
O 最 后 一 个 图 案 复制 并 旋转 了 grid 图 案 。 


例 10-6 还 强调 了 图 案 与 其 内 容 是 如 何 根据 它们 在 文档 树 的 位 置 来 继承 样式 
的 。 图 案 不 会 继承 使 用 图 案 填 充 的 元 素 上 的 样式 。 









































XXX 


、 


Sexe 














10-6: 旋转 变换 前 后 的 细 条 纹 图 案 
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xLink:href 图 案 模板 和 图 案 样 式 继承 的 结合 意味 着 你 可 以 通 
过 改变 继承 的 样式 来 创建 颜色 不 同 的 图 案 ， 类 似 于 你 可 以 通 
过 设置 <use> 元 素 的 样式 来 创建 颜色 不 同 的 图 标 。 不 幸 的 是 ， 
SVG 规范 的 起 草 者 没有 考虑 到 这 种 可 能 性 ， 且 任何 已 经 测试 
的 训 览 器 都 没有 实现 这 种 方式 。 
然而 ， 规 范 中 也 没有 明确 说 明 复 制图 案 内 容 不 应 该 从 新 的 图 
案 中 继承 ， 所 以 在 未 来 这 可 能 会 有 所 改变 。 目 前 ， 在 原始 和 
复制 的 图 案 元 素 中 ， 所 有 继承 样式 都 是 相同 的 。 





















































这 种 对 角 线 效果 同样 可 以 使 用 对 象 边界 盒 图 案 磁 贴 创建 ， 但 在 7.4 节 中 的 经 
验 教训 依然 适用 。 对 象 边 界 盒 单 元 会 添加 自己 的 变换 ， 这 会 扭曲 旋转 的 角 
度 。 旋 转 45 度 将 会 创建 沿 着 边界 盒 对 角 线 的 线 ， 而 不 论 该 45 度 是 不 是 绝 
对 意义 上 的 45 度 。 





简写 的 hatch 图 案 

SVG 2 引入 了 一 个 新 的 澄 染 服 务 元 素 ， 它 将 大 大 简化 像 例 10-6 中 那样 的 条 
纹 图 案 的 创建 。 我 们 把 它 称 为 hatches， 它 们 也 用 于 消除 图 案 磁 贴 边 缘 的 
不 连续 (四 会 五 入 的 误差 所 致 )。 与 磁 贴 在 两 个 方向 上 重复 不 同 ， 它 本 身 是 
由 条 纹 组 成 的 。 条 纹 将 会 像 图 案 那 样 在 一 个 方向 上 平 铺 ， 但 它们 是 由 一 条 
连续 的 路 径 组 成 ， 且 在 另 一 个 方向 上 无 限 长 。 每 条 路 径 都 会 有 重复 的 部 分 ， 
但 和 它 会 作为 一 个 单独 的 元 素平 滑 地 泻 染 。 

hatch 图 案 通 过 <hatch> 元 素来 定义 ， 它 有 以 下 属性 : 


e xey (定义 第 一 个 条 纹 的 偏 移 位 置 ) 

e pitch (条 级 之 间 的 间隔 ) 

。 rotate (条 纹 的 角度 ) 

e hatchUnits 和 hatchContentUnits ( 值 4 userSpaceOnUse 或 objectBoundingBox, 
默认 情况 下 与 图 案 相 同 ) 

。 transform (等 同 于 patternTransform) 

。 xlink:href (引用 另 一 个 <hatch> 元 素来 作为 模板 ) 


hatch 元 素 和 包含 一 个 <hatchpPath> 元 素 ， 每 一 个 该 元 素 都 定义 了 一 条 线 或 路 
径 。 默 认 情 况 下 ， 路 径 是 一 条 垂直 线 (PAF RB <chatch> 的 变换 )。 你 还 
可 以 使 用 d 属性 来 提供 路 径 定 义 的 一 个 片段 : 你 指定 的 路 径 将 会 无 限 连接 
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在 一 起 。 因 此 如 下 代码 将 会 创建 无 穷 的 波浪 线 : 


<hatch hatchUnits="userSpaceOnUse" pitch="6"> 
<hatchPath stroke-width="1" 
d="c 0,4 8,6 8,10 8,14 0,16 0,20"/> 
</hatch> 


无 法 给 hatch 图 案 创建 背景 凑 色 ,因为 有 了 新 的 分 层 填 充 的 语法 ， 背 景 闫 
色 可 以 在 使 用 hatch 的 同时 定义 。 


通过 变换 ， 你 可 以 创建 平行 四 边 形 或 菱形 图 案 磁 贴 来 布局 ， 而 不 局 限于 简 
单 的 长 方形 。 对 于 大 多 数 可 预期 的 结果 ， 这 类 图 案 通 常 使 用 userSpaceOnUse 
效果 最 好 。 对 象 边界 盒 单 位 的 不 均匀 缩放 可 能 无 法 与 patternTransform 值 
完美 搭配 。 


图 10-7 显示 了 两 种 可 以 通过 变换 矩形 磁 贴 来 创建 的 几何 图 案 。 代 码 如 例 
10-7 所 示 。 


例 10-7 ”使 用 patternTransform 创建 三 角形 或 菱形 图 案 
<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="4in" height="6.5in" viewBox="0 0 400 650"> 
<title xml: lang="en">Transformed Patterns</title> 
<pattern id="triangles" patternUnits="userSpaceOnUse" 
width="20" height="17.32" 
patternTransform="skewX(30)"> (1) 
<rect width="30" height="20" fill="lightGreen" /> 
<polygon points="0,0 20,0 0,17.32" fill="forestgreen" /> @ 
</pattern> 
<pattern id="argyle" patternUnits="userSpaceOnUse" 
width="20" height="20" 
patternTransform="scale(2,4) rotate(45)"> 
<rect fill="mediumPurple" width="20" height="20"/> 
<rect fill="indigo" width="10" height="10"/> 
<rect fill="navy" width="10" height="10" 
x="10" y="10"/> 
<path stroke="lavender" stroke-width="0.25" fill="none" 
d="M0,5 L20,5 M5,0 L5,20 
MO,15 L20,15 M15,0 L15,20" /> O 




















© © 


</pattern> 


<rect width="400" height="325" fill="url(#triangles)" /> 
<rect width="400" height="325" y="325" 
fill="url(#argyle)" /> 
</svg> 
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O 第 一 个 图 案 使 用 30 度 的 倾斜 来 把 图 案 磁 贴 转 换 为 平行 四 边 形 。 每 个 磁 
贴 的 高 度 被 调整 为 等 边 三 角形 的 高 ， 三 角形 的 底 等 于 图 案 磁 贴 的 宽度 。 
O 该 步骤 的 结果 是 ， 填 充 未 变换 的 磁 贴 左上 和 角 的 <polygon> 三 角形 在 倾斜 
30 度 后 变 为 一 个 完美 的 等 边 三 角形 。 

O 第 二 个 图 案 使 用 不 均匀 的 缩放 以 及 45 度 的 旋转 来 创建 一 个 菱形 图 案 
磁 贴 。 

O 方 格 图 案 是 通过 使 用 两 个 位 于 相对 角 且 宽 和 高 都 为 磁 贴 一 半 的 长 方形 来 
创建 。 该 方 格 会 与 图 案 磁 贴 一 起 变换 来 创建 方 格 萎 形 。 

O 菱形 图 案 的 最 后 一 个 元 素 是 绘制 四 条 单独 的 直线 的 <path>， 它 们 用 于 平 
分 每 个 菱形 方 格 。 

例 10-7 中 的 两 个 图 案 都 在 垂直 和 水 平 上 重复 ， 并 且 都 可 以 不 使 用 变换 来 创 

建 。 但 这 将 导致 图 案 内 容 更 加 复杂 。 更 多 的 坐标 需要 进行 三 角形 计算 ， 并 

且 很 可 能 会 由 于 四 舍 五 人 导致 相 邻 的 磁 贴 之 间 出 现 不 连续 。 


























CSS 与 SVG 
复杂 的 重复 图 案 

CSS 背景 图 片 不 能 在 它们 的 宿主 形状 内 单独 变换 。 图 10-6 和 图 10-7 这 样 的 

图 案 有 两 种 创建 方法 。 

。 使 用 伪 元 素来 包 庄重 复 的 背景 ， 设 置 它 的 z-index 来 使 它 位 于 主 内 容 下 
面 ， 然 后 给 它 添加 transform 属性 来 应 用 旋转 、 倾 儿 和 缩放 。 确 保 伪 元 
素 的 display 为 block 且 大 于 它 的 父 级 元 素 (这 样 变换 的 时 候 不 会 漏出 
空白 点 ) ， 还 要 确保 父 级 元 素 的 overflow 设置 为 隐藏 。 

。 绘制 一 个 很 大 的 背景 ， 计 算 水 平和 垂直 方向 上 确切 的 重复 数量 ， 然 后 在 
每 个 背景 磁 贴 内 引入 变换 效果 。 这 种 方式 与 例 10-5 中 创建 重 登 的 鱼鳞 效 
RAM, 
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完美 的 图 片 图 案 





pattern 引出 了 我 们 在 第 10 章 中 探讨 的 重复 设计 。 然 而 ，SVG 中 的 
<pattern> 元 素 比 这 更 加 灵活 。 通 过 定义 适合 对 象 边界 盒 的 图 案 磁 贴 ， 你 可 











以 创建 不 通过 重复 而 填充 整个 形状 的 图 案 。 
那么 为 什么 要 这 样 做 呢 ? 一 是 能 够 同时 布局 多 个 泻 染 服务 。 二 是 使 用 图 片 

















填充 形状 ， 就 像 CSS 背景 图 片 那样 。 


之 前 我 们 已 经 简要 地 提 到 ，SVG 2 允许 在 一 个 单独 的 填充 声明 中 使 用 多 层 
泻 染 服务 ， 且 可 以 直接 使 用 图 片 来 作为 填充 值 ， 这 似乎 使 得 这 种 类 型 的 图 
案 显 得 很 多 余 。 然 而 ， 就 算 这 些 属性 都 可 用 ， 这 项 技术 在 创建 多 数 效 果 时 
也 必 不 可 少 。 


本 章 还 讨论 了 在 <pattern> 元 素 上 使 用 viewBox 和 preserveAspectRatio 属 
性 。 这 些 属性 在 全 图 像 填 充 时 尤其 重要 ， 它 们 也 可 以 与 重复 图 案 一 起 使 用 。 


11.1 层次 感 

在 第 9 章 最 后 的 例 9-8 中 ， 我 们 分 别 给 三 个 独立 的 矩形 使 用 不 同 的 渐变 填 
充 ， 创 建 了 聚光灯 照射 在 舞台 上 的 效果 。 这 种 方式 对 于 单个 形状 来 说 很 有 
用 ， 但 是 如 果 你 想 在 多 个 形状 中 使 用 相同 的 分 层 效 果 ， 这 种 方式 就 不 太 适 
合 了 。 此 时 就 应 该 使 用 图 案 了 。 一 个 图 案 可 以 包含 所 有 的 层 ， 把 它们 变 成 
一 个 单独 的 渲染 服务 来 供 其 他 形状 使 用 。 
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例 11-1 中 把 三 个 渐变 结合 在 一 个 <pattern> PAR (E— 7 Mal A — hl E 
来 像 颜色 亮度 不 均匀 的 球体 。 相 同 的 图 案 也 可 以 用 来 填充 文本 标题 ， 如 图 
11-1 所 示 。 


例 11-1 使 用 非 重 复 图 案 的 分 层 渐变 
<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="6.5in" viewBox="0 0 400 650"> 
<title xml: lang="en">Multiple gradients</title> 
<defs> 
<linearGradient id="red-blue" y2="1"> (1) 
<stop stop-color="red" offset="0"/> 
<stop stop-color="blue" offset="1"/> 
</linearGradient> 
<linearGradient id="yellow-violet" y1="1" y2="0"> @ 
<stop stop-color="yellow" 
stop-opacity="0.9" offset="0.1"/> 
<stop stop-color="darkMagenta" 
stop-opacity="0" offset="0.5"/> © 
<stop stop-color="violet" 
stop-opacity="0.9" offset="0.9"/> 

















</linearGradient> 
<radialGradient id="flare" fx="0.2" fy="0.2" 
stop-color="white" > @ 


<stop stop-color="inherit" 
stop-opacity="0" offset="0.75"/> 
<stop stop-color="inherit" 
stop-opacity="0.05" offset="0.85"/> 
<stop stop-color="inherit" 
stop-opacity="0.2" offset="1"/> 
</radialGradient> 
<pattern id="gradient-pattern" width="1" height="1" 
patternContentUnits="objectBoundingBox" > @ 
<rect width="1" height="1" fill="url(#red-blue)"/> 
<rect width="1" height="1" fill="url(#yellow-violet)"/> 
<rect width="1" height="1" fill="url(#flare)"/> O 
</pattern> 
</defs> 
<g fill="url(#gradient-pattern)"> (7) 
<circle cx="200" cy="180" r="180" /> 
<ellipse cx="110" cy="500" rx="110" ry="145" /> 
<text x="400" y="525" text-anchor="end" 
font-size="100px" font-family="serif" 
stroke="indigo">Layers</text> 
</g> 
</svg> 
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11-1: 分 层 渐变 图 案 填 充 的 形状 和 文本 
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@ red-blue 渐变 从 边界 盒 的 左上 角 向 右 下 角 ( 记 住 ，x2 默认 是 100%) 延 
伸 。 它 使 用 的 是 纯色 且 位 于 最 底层 。 


@ yellow-violet 渐变 从 边界 盒 的 左下 角 向 右上 角 延 伸 。 


© 该 渐变 局 部 透明 ， 在 中 点 位 置 完 全 透明 (stop-opacity="0") 以 允许 其 
他 层 显示 出 来 。 透 明 的 结 点 依然 需要 一 个 stop-color， 否 则 它 会 默认 为 
黑色 且 两 边 的 颜色 将 会 是 暗 灰色 的 色调 。 


O 白色 的 径 向 渐变 几乎 是 透明 的 ， 只 有 在 边缘 是 20% 的 不 透明 。 为 了 方便 
编辑 或 请 加 动画 ， 单 一 颜色 定义 在 渐变 元 素 上 ， 然 后 在 每 个 结 点 上 都 明 
确 指定 继 承 父 级 。 不 幸 之 处 是 stop-color 默认 不 会 继承 。 


© <pattern> 中 图 案 磁 贴 (默认 ) 和 内 容 (明确 指定 ) 使 用 的 都 是 
objectBoundingBox 单位 。 磁 贴 的 宽 和 高 都 设置 为 不 重复 填 满 整个 盒子 。 


O 渐变 层 通过 填充 <rect> 元 素来 绘制 ， 它 也 会 被 缩放 到 填充 整个 边界 盒 ， 
宽 和 高 都 是 1 个 单位 。 

O 组 元 素 上 使 用 Fill 表现 属性 来 设置 使 用 分 层 图 案 填充 ， 形 状 和 文本 将 会 
继承 该 值 。 然 而 ， 每 个 元 素 都 独立 继承 填充 属性 ， 且 使 用 它 自 己 的 边界 

图 11-1 中 的 图 案 ， 以 及 组 成 它 的 渐变 ， 会 根据 每 个 形状 (或 文本 元 素 ) 对 

象 边 界 盒 的 尺寸 来 拉 伸 。 对 于 抽象 的 渐变 ， 这 没有 什么 问题 。 但 对 于 其 他 

图 案 内 容 ， 这 种 扭曲 是 不 可 接受 的 。 

避免 扭曲 的 一 种 方式 是 给 图 案 内 容 使 用 userSpaceOnuse 单位 。 然 而 ， 这 样 

的 话 图 案 就 不 会 缩放 到 适合 形状 的 大 小 。 此 外 ， 坐 标的 位 置 是 相对 于 图 形 

的 整体 空间 ， 而 不 是 对 象 本 身 。 如 果 移 动 对 象 ， 它 的 坐标 就 会 改变 ， 图 案 

会 保持 相对 于 背景 固定 。 

通过 相对 于 坐标 系 中 一 个 固定 的 点 来 定义 形状 ， 然 后 在 <use> 元 素 上 使 用 

变换 或 x 和 y 属性 (和 变换 有 相同 效果 ) 来 把 它 移动 到 合适 的 位 置 ， 我 们 

可 以 处 理 定 位 的 问题 。 要 想 解 决 缩放 的 问题 ， 只 能 使 用 <symbol> 元 素 或 能 

套 的 SVG 来 为 每 个 要 填充 其 整个 宽 和 高 的 形状 创建 一 个 单独 的 坐标 系 。 当 

然 ， 这 一 切 昕 起 来 都 会 增加 许多 额外 的 工作 和 复杂 性 。 

幸运 的 是 ， 还 有 一 个 选项 可 以 控制 <pattern> 内 容 的 缩放 : 定义 一 个 

viewBox 并 使 用 preserveAspectRatio 来 保证 它 不 会 被 扭曲 。 
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11.2 保持 原始 图 案 


如 果 没 有 viewBox 属性 ， 你 的 SVG 就 不 能 很 好 地 工作 ， 尤 其 是 在 Web E- 
把 它 设 置 在 你 的 根 <svg> 元 素 上 ， 它 会 建立 基本 的 坐标 系 以 及 宽 高 比 ， 以 
允许 你 的 图 形 可 以 缩放 到 设置 的 任何 区 域 。 它 也 可 以 用 在 肯 套 的 <svg> 元 
素 上 和 重复 使 用 的 symbol 中 来 创建 局 部 缩放 的 效果 。 
viewBox 可 以 定义 四 个 数字 : 前 两 个 定义 的 是 你 要 在 图 形 中 包含 的 最 小 点 的 
(x,y) 坐标， 而 第 三 个 和 第 四 个 数字 分 别 表示 的 是 图 形 包含 的 宽 和 高 的 单位 
数 。 通 常 前 两 个 数字 都 是 0 〈 所 以 原点 在 左上 角 且 图 形 中 所 有 的 坐标 值 都 是 
正 的 ) 或 负 值 (用 于 把 坐标 原点 放置 在 图 形 中 心 )。 
preserveAspectRatio 属性 很 容易 被 我 们 忽视 ， 因为 它 的 默认 值 往往 就 是 你 
需要 的 值 。 它 可 以 设置 为 以 下 三 种 缩放 模式 的 一 种 。 

meet 在 不 扭曲 的 情况 下 ,缩放 你 整个 viewBox 区 域 到 正好 全 部 显示 在 〈 紧 

贴 边缘 ) 可 见 空间 内 。 

slice 放大 viewBox 到 覆盖 整个 可 见 空间 (多 余部 分 会 被 裁减 邱 ) 

none 按 需 要 拉 伸 或 压缩 viewBox 到 正好 在 两 个 方向 上 填充 可 见 空间 。 


对 于 meet 和 slice， 必 须 还 要 定义 一 个 类 似 于 xMinYMax 的 基准 值 来 控制 
viewBox 区 域内 哪个 点 与 绘制 矩形 对 等 的 点 相对 准 。 


在 <pattern> 元 素 中 ，viewBox 属性 会 覆盖 patternContentUnits 的 设置 并 
给 你 的 图 案 创建 自己 的 坐标 系 。 就 任何 preserveAspectRatio 属性 值 而 言 ， 
viewBox 创建 的 坐标 系 都 将 缩放 到 适合 图 案 磁 贴 。 


在 Firefox 40 (2015 年 中 发 布 ) 之 前 ，viewBox 以 及 任何 
preserveAspectRatio 值 是 在 转换 为 对 象 边 界 盒 之 后 应 用 的 
(忽略 patternContentUnits 的 值 )。 这 会 导致 非 正 方形 边界 
盒 中 的 图 案 被 扭曲 ， 即 使 图 案 的 宽 高 比 与 形状 完全 匹配 。 
















































































因为 meet 会 维持 图 案 的 宽 高 比 来 缩放 到 适合 可 见 空间 的 整个 宽 和 高 ， 这 可 
能 会 导致 图 案 周 围 的 内 容 出 现 空白 。 这 包括 xMidYMid meet 值 应 用 在 定义 
viewBox 而 没有 定义 preserveAspectRatio 的 元 素 上 时 。 

有 一 种 方式 是 有 意 地 在 你 的 图 案 内 绘制 一 个 比 viewBox 更 大 的 背景 元 素 。 该 
背景 会 被 裁剪 到 图 案 磁 贴 的 大 小 ， 且 viewBox 将 会 缩放 到 适合 它 的 大 小 。 例 
11-2 中 使 用 这 种 方式 创建 了 一 个 填补 的 圆 形 渐变 并 保持 了 它 的 本 来 形状 ， 
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而 忽略 要 填充 形状 的 宽 高 比 。 保 持原 始 形状 的 渐变 绘制 在 一 个 正方 形 形 状 
内 (也 可 以 使 用 circte)。 该 正方 形 会 填充 整个 viewBox, {H viewBox 通常 
不 会 填充 整个 图 案 磁 贴 。 


图 11-2 中 显示 了 渐变 图 案 的 结果 ， 并 填充 了 一 个 长 方形 。 





























11-2: 通过 固定 宽 高 比 的 图 案 而 放置 在 长 方形 盒子 内 的 圆 形 渐变 














例 11-2 ”使 用 固定 宽 高 比 的 图 案 创 建 一 个 永远 都 是 圆 形 的 新 变 


<svg xmLns="http://www.w3.org/2000/svg" 


width="100%" height="100%"> o 
<title xml: lang="en">Always-Circular Gradient</title> 
<defs> 

<radialGradient id="radial"> (2) 


<stop stop-color="lightYellow" offset="0"/> 
<stop stop-color="yellow" offset="0.2"/> 
<stop stop-color="gold" offset="0.8"/> 
<stop stop-color="orangeRed" offset="1"/> 
</radialGradient> 
<pattern id="circular-gradient" width="1" height="1" 
viewBox="0 0 1 1"> © 
<rect width="5" height="5" x="-2" y="-2" 
fill="orangeRed"/> @ 
<rect width="1" height="1" 
fill="url(#radial)"/> (5) 
</pattern> 
</defs> 
<rect height="100%" width="100%" fill="url(#circular - 
gradient)" /> 
</svg> 
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O SVG (以 及 它 包含 的 长 方形 ) 占据 可 见 区 域 的 100%， 所 以 你 可 以 通过 
缩放 浏览 器 窗口 来 测试 不 同 的 宽 高 比 。 

O 径 癌 渐变 使 用 默认 的 位 置 和 尺寸 ， 所 以 它 将 放置 在 要 填充 形状 的 中 心 ， 
并 缩放 到 其 边界 盒 大 小 。 

O 图 案 也 会 填 满 整个 边界 盒 ( 宽 和 高 为 1， 且 patternunits 使 用 默认 值 )。 
viewBox 定义 了 内 容 单 位 ， 创 建 了 一 个 1:1 的 宽 高 比 ， 而 忽略 边界 盒 的 
尺寸 。 

O 背景 矩形 绘制 为 vitewBox 创建 的 正方 形 区 域 的 5 倍 大 小 ， 并 以 它 为 中 心 。 
背景 使 用 最 后 一 个 渐变 结 点 (填补 ) 中 相同 的 颜色 填充 。 

O 渐变 本 身 绘制 在 一 个 宽 和 高 正好 适合 viewBox 的 正方 形 内 。 

值得 注意 的 重要 一 点 是 ， 图 案 内 的 形状 是 通过 缩放 的 用 户 单 位 而 不 是 百 分 

比 定义 的 。 虽 然 viewBox 创建 了 新 的 坐标 系 原点 和 新 的 缩放 ， 但 它 没 有 创建 

一 个 定义 百分比 长 度 的 新 视 口 。 在 图 案 内 ， 百 分 比 长 度 会 基于 某 一 单位 按 

比例 缩放 ， 而 忽略 任何 viewBox 的 值 。 




















正如 对 象 边界 盒 单 位 中 提 到 的 ， 这 通常 并 没什么 用 且 不 可 预 
见 ， 所 以 应 避免 在 除 user SpaceOnUse 外 的 图 案 中 使 用 百分比 。 





























使 用 viewBox 而 非 对 象 边界 盒 单位 还 可 以 消除 图 案 磁 贴 缩放 和 图 案 内 容 缩 放 
之 间 的 相互 依赖 。 图 案 上 的 viewBox 通常 会 缩放 到 适合 每 个 单独 的 图 案 磁 
贴 ， 而 不 是 整体 的 边界 盒 。 图 11-3 显示 了 缩小 每 个 图 案 磁 贴 到 盒子 宽度 的 
10%、 高 度 的 25% 时 图 案 的 样子 ， 使 用 的 是 如 下 属性 : 


<pattern id="circular-gradient" width="0.1" height="0.25" 
ViewBox="0 0 1 1"> 


图 案 内 容 中 <rect> 元 素 上 的 宽 和 高 都 没有 改变 。 

例 11-2 中 使 用 超大 背景 的 方式 并 不 理想 。 如 果 图 案 磁 贴 的 宽 高 比比 5:1 更 
极端 ， 背 景 就 不 能 填 满 整个 图 案 。 如 果 使 用 图 案 覆 盖 整 个 磁 贴 比 让 整个 图 
案 内 容 可 见 更 加 重要 ， 你 可 以 给 preserveAspectRatio 使 用 slice。 它 可 以 
保证 图 案 内 容 总 是 完全 和 覆盖 磁 贴 。 





















































164 | 第 11 章 

















B 11-3: 重复 的 圆 形 渐变 图 案 


11.3 SVG 样式 的 背景 图 片 


HEH slice 方式 来 保持 宽 高 比 ， 且 是 单 磁 贴 边界 盒 图 案 时 ， 它 的 效果 与 
CSS 中 设置 背景 图 片 background-size: cover 时 很 相似 。 单 个 图 形 会 填充 
整个 形状 。 


例 11-3 使 用 一 个 图 案 来 包含 一 个 阳光 和 天 空 的 SVG 图 形 ， 它 可 能 会 被 用 于 
幻灯 片 或 海报 的 背景 。slice 效果 通过 一 系列 填充 不 同 宽 高 IEE KEŞ 
来 展示 ， 结 果 如 图 11-4 所 示 。 


例 11-3 重复 使 用 一 个 SVG 图 形 来 填充 非 重复 图 形 
<svg xmLns="http://www.w3.org/2000/svg" 
width="4in" height="6.5in" viewBox="0 0 400 650"> 
<title xml: lang="en">Sliced Image Pattern</title> 
<defs> 
<linearGradient id="sky" x2="0" y2="1"> (1) 
<stop stop-color="lightSkyBlue" offset="0"/> 
<stop stop-color="deepSkyBlue" offset="1"/> 
</linearGradient> 
<radialGradient id="sunlight" cx="0" cy="0" > 
<stop stop-color="yellow" 
stop-opacity="0.9" offset="0.2"/> 
<stop stop-color="lightYellow" 
stop-opacity="0" offset="1"/> 
</radialGradient> 
<radialGradient id="cloud" fx="0.5" fy="0.15" r="0.6"> 
<stop stop-color="oldLace" offset="0.75"/> 
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<stop stop-color="lightGray" offset="0.9"/> 
<stop stop-color="darkGray" offset="1"/> 
</radialGradient> 
<pattern id="sky-pattern" width="1" height="1" 
viewBox="0 0 100 50" 
preserveAspectRatio="xMinYMin slice" > @ 
<rect width="100" height="50" fill="url(#sky)"/> 
<g fill="url(#cloud)"> 


<g> 
<circle cx="10" cy="42" r="5" /> 
<circle cx="6" cy="42" r="3" /> 
<circle cx="16" cy="43" r="3" /> 
<circle cx="14" cy="41" r="4" /> 
</g> 
<g> 
<circle cx="20" cy="22" r="7" /> 
<circle cx="50" cy="22" r="10" /> 
<circle cx="40" cy="18" r="7" /> 
<circle cx="45" cy="25" r="9" /> 
<circle cx="30" cy="25" r="12" /> 
</g> 
<g> 
<circle cx="72" cy="39" r="5" /> 
<circle cx="77" cy="40" r="3" /> 
<circle cx="83" cy="41" r="4" /> 
<circle cx="80" cy="36" r="5" /> 
<circle cx="76" cy="35" r="3" /> 
<circle cx="86" cy="39" r="3" /> 
</g> 
</g> 
<rect width="50" height="50" fill="url(#sunlight)"/> 
</pattern> 
</defs> 
<g fill="url(#sky-pattern)"> @ 


<rect width="400" height="175" /> 
<text x="200" y="280" textLength="390" 
text-anchor="middle" font-family="sans-serif" 
font-size="124px" font-weight="bold" 
stroke-width="2" stroke="deepSkyBlue" 
>Clouds</text> 
<rect y="290" width="250" height="250" /> 
<rect x="270" y="290" 
width="130" height="250" /> 
<rect x="0" y="550" 
width="400" height="100" /> 











4 











图 11-4: 使 用 相同 的 图 形 青 景 填充 不 同 宽 高 比 的 长 方形 和 文本 
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O 该 代码 包含 了 许多 渐变 的 定义 ， 它 们 用 在 图 案 内 的 图 形 。 

O 图 案 本 身 有 一 个 通过 viewBox 定义 的 2:1 (100 x 50) 的 宽 高 比 。pattern- 
Units 和 patternContentUnits 属性 都 不 是 必需 的 : patternUnits 属性 使 
用 默认 值 ， 且 宽 和 高 都 填充 整个 边界 盒 。 再 次 说 明 ， 内 容 单位 是 不 需要 
的 ， 因 为 它们 会 被 viewBox 替换 。 最 后 通过 preserveAspectRatio 属性 设 
A slice 缩放 和 对 齐 方式 。 


O 图 案 内 容 包 括 一 个 蓝 色 渐变 填充 的 长 方形 ， 一 组 通过 渐变 填充 的 圆 来 
创建 的 云 从 ， 以 及 最 后 通过 金色 到 透明 的 径 向 渐变 形成 的 太阳 填充 的 
长 方形 。 

O <rect> 元 素 和 文本 都 是 真实 绘制 的 图 形 ， 它 们 会 从 组 元 素 上 继承 填充 
值 。 与 往常 一 样 ， 每 个 填充 层 的 边界 盒 是 基于 每 个 元 素 计 算 的 ， 而 不 是 
基于 组 。 

图 案 除 了 slice 缩放 模式 ， 还 使 用 了 xminymin 对 齐 选项 ， 所 以 图 形 的 左上 

角 始 终 包含 在 边界 盒 内 〈 虽 然 形状 本 身 不 一 定 ) ， 如 填充 文本 时 所 示 。 




















使 用 图 片 文件 填充 SVG 形状 和 文本 

在 第 6 章 曾 简单 提 到 ，SVG 2 中 将 允许 CSS 图 片 类 型 直接 作为 SVG 形状 和 
文本 的 填充 值 。 这 包括 CSS 渐变 函数 ， 也 包括 通过 URL 引用 单独 的 SVG 
或 光栅 图 片 文件 。 
例如 ， 你 可 以 使 用 复 用 的 背景 创建 一 个 单独 的 图 片 文件 ， 然 后 将 如 下 规则 
应 用 在 形状 上 : 

.slide { 

fill: url(clouds.svg); 

} 
PWARAARR TH E AWMEBLAMEAPNILALAR A, CRE 
法 和 使 用 CSS 背景 图 片 很 相似 。 





虽然 现在 还 不 能 使 用 单独 的 图 片 文 件 代替 SVG 渲染 服务 ， 但 可 以 在 演 染 服 
务 内 通过 SVG<image> 元 素 使 用 图 片 文 件 。 

i] 11-4 创建 了 一 个 包括 摄影 照片 (NASA 提供 的 地 球 的 合成 图 片 ) 的 图 案 。 
图 片 被 放大 来 填充 图 案 磁 贴 ， 多 余部 分 被 裁剪 掉 。 图 11-5 显示 了 最 终 效果 。 
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例 11-4 在 图 案 内 使 用 摄影 照片 来 填充 文本 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xlink" 
width="400" height="250" viewBox="0 0 800 500"> 
<title xml: lang="en">Earth in Space</title> 
<style type="text/css"> 
.earth { 
font-family: sans-serif; 
font-weight: bold; 
font-size: 148pt; 


text-anchor: middle; 
fill: url('#photoFill'); 
stroke: #205334; 
stroke-width: 3; 
text-decoration: overline underline; 
text-shadow: white 0 0 8px ; (1) 
} 
«background { 
fill: url(#background); 
} 
</style> 
<defs> 
<pattern id="photoFill" width="1" height="1" 
viewBox="0 0 1 1" 


preserveAspectRatio="xMidYMid slice"> (2) 
<image x="-0.1" y="-0.1" width="1.2" height="1.2" 
xlink:href="globe_west_1024.jpg" /> © 
</pattern> 
<linearGradient id="background" 
gradientTransform="rotate(90)"> (4) 


<stop stop-color="black" offset="0"/> 

<stop stop-color="black" offset="0.5"/> 
<stop stop-color="navy" offset="0.80"/> 
<stop stop-color="blue" offset="0.9"/> 

<stop stop-color="lightBlue" offset="0.95"/> 
<stop stop-color="green" offset="0.95"/> 
<stop stop-color="brown" offset="1.2"/> 


</linearGradient> 
</defs> 
<rect width="100%" height="100%" class="background"/> 
<text class="earth" x="400" y="60%">EARTH</text> © 
<metadata> O 
Image Source: http://visibleearth.nasa.gov/view.php?id=57723 
</metadata> 
</svg> 
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=m ChenyangGao(2339083510@qq.com) # 









O 字体 样式 和 SVG 样式 都 是 通过 CSS 类 来 设置 的 。text-shadow 在 支持 该 
属性 的 浏览 器 中 给 字母 周围 稍微 添加 了 一 些 光 臣 ， 同 时 声明 underline 
和 overline 是 为 了 添加 一 个 边框 效果 。 


@ height 和 width 属性 创建 了 一 个 适合 边界 盒 的 单个 图 案 磁 贴 。viewBox 
创建 了 一 个 正方 形 的 宽 高 比 ， 根 据 preserveAspectRatio 的 值 ， 它 将 会 
扩展 到 有 履 盖 整个 磁 贴 且 多 余 的 部 分 会 被 裁减 掉 。 


O 图 片 本 身 绘 制 得 比 viewBox 稍 大 一 些 ， 这 样 是 为 了 不 包含 地 球 周围 的 墨 
空间 。 


© -LinearGradient> 提供 了 一 个 类 似 地 平 线 的 背景 效果 。 
O 文本 被 放置 在 SVGviewBox 的 中 间 ， 它 的 尺寸 、 字 体 和 text-anchor 都 
是 通过 CSS 类 来 设置 的 。 
QO <metadata> 提供 了 该 文件 的 一 些 额 外 信息 ， 这 既 不 是 图 片 的 一 部 分 ， 也 
是 它 的 替换 文本 。 










































































图 11-5: 使 用 裁剪 的 图 案 填充 的 文本 


该 例子 演示 了 text-decoration 标记 (underlines, overlines 以 及 strike- 
throughs) 将 被 视 为 文本 内 容 的 一 部 分 ， 且 都 会 像 字 母 那 样 使 用 相同 的 样式 
填充 和 描 边 。 另 一 个 具体 的 文本 演 染 效果 是 使 用 text-shadow 来 提高 字母 周 
围 的 对 比 度 。 





170 | 第 11 章 


虽然 大 多 数 浏览 器 支持 给 CSS 布局 的 文本 添加 text- shadow, 
但 正 以 及 许多 其 他 基于 SVG 1.1 规范 的 工具 不 支持 给 SVG 
添加 该 效果 。 即 使 支持 的 Web 浏览 器 中 也 有 一 些 bug: 
Chrome 在 文本 被 缩放 时 不 会 缩放 它 的 阴影 ，Firefox 在 文本 
使 用 泻 染 服务 填充 文本 时 不 会 绘制 阴影 ，Safari 在 使 用 泻 染 
服务 时 ， 会 在 每 个 em-box 周围 创建 阴影 ， 而 不 是 沿 着 字母 
的 形状 创建 阴影 。 


换 句 话说 ， 只 在 不 添加 装饰 的 文本 上 使 用 text-shadow。 如 有 果 
你 要 使 用 它 ， 它 必须 使 用 CSS 来 定义 ， 而 不 能 通过 表现 属性 
定义 。 













































































例 11-4 中 使 用 的 图 片 资 源 如 图 11-6 所 示 。 它 是 一 个 正方 形 ， 宽 高 比 和 
<image> 元 素 上 的 height 和 width 属性 正好 匹配 。 如 果 不 匹 配 ， 默 认 会 缩小 
来 适合 <image>， 这 会 破坏 图 案 的 slice 效果 。 对 于 不 同 的 图 片 ， 你 可 能 需 
要 改变 图 片 元 素 的 尺寸 以 及 viewBox 的 宽 高 比 ， 这 样 图 片 才 可 以 完全 填充 。 


















































图 11-6: 用 于 填充 SVG 文本 的 图 片 (照片 来 自 美国 宇航 局 成 达 德 太空 飞行 中 
心 Reto Stockli， 由 Robert Simmon 对 效果 进行 增强 处 理 ) (http:/ 
visibleearth.nasa.gov/view.php?id=57723) 
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如 果 不 知道 要 使 用 的 图 片 的 宽 高 比 ， 你 可 以 在 <image> 元 素 
本 身上 定义 一 个 值 为 slice 的 preserveAspectRatio 属性 。 两 
个 slice 的 设置 可 能 会 裁减 掉 比 我 们 需要 的 更 多 的 内 容 ， 但 
这 也 比 显示 空白 更 加 友好 。 








你 可 以 把 例 11-4 中 的 效果 描述 为 根据 文本 裁剪 图 片 。 实 际 上 ， 你 可 以 通过 
把 文本 包含 在 <clipPath> 元 素 内 ， 然 后 在 <image> 元 素 的 clip-path 属性 中 
引用 它 来 创建 非常 相似 的 效果 (除去 描 边 和 阴影 )。 这 种 情况 下 ，<image> 
将 是 显示 在 屏幕 上 的 元 素 ， 文 本 成 为 图 形 效果 的 一 部 分 。 通 过 把 图 片 填充 
到 <text> 元 素 内 ， 文 本 可 以 保持 可 选择 和 可 访问 。 








聚焦 未 来 

泻 染 文本 修饰 
CSS Text Decoration Module Level 3 中 扩展 了 text-decoration 属性 ， 使 
它 成 为 一 系列 子 属性 的 简写 形式 。 扩 展 的 语法 不 仅 允 许 你 设置 线条 的 类 型 
(下 划 线 、 上 划 线 或 删除 线 )， 还 可 以 设置 它 的 颜色 、 样 式 ， 例如 虚线 或 波 
RR. 
这 些 新 的 选项 大 部 分 都 过 用 于 SVG， 但 颜色 选项 由 于 SVG 文本 具有 填充 和 
描 边 而 变 得 更 加 复杂 ， 它 不 是 单一 的 文本 颜色 。 最 终 ，SVG 2 中 引入 了 相 
应 的 text-decoration-fill 和 text-decoration-stroke 属性 。 
浏览 器 已 经 开始 实现 对 新 的 文本 修饰 选项 的 支持 。 然 而 ， 编 写本 书 时 ， 还 
没有 浏览 器 实现 SVG 特定 的 对 填充 和 描 边 洽 染 的 控制 。 
例 11-4 中 使 用 的 text-shadow 效果 是 在 CSS2 中 初次 提出 的 ， 但 并 没有 成 为 
最 终 的 规范 。 现 在 它 已 经 被 包含 在 CSS Text Decoration Module Level 3 草案 
中 。 编 写本 书 时 ， 它 还 没有 正式 作为 SVG 的 表现 属性 而 被 采用 。 
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第 12 章 


有 纹理 的 文本 





在 第 11 章 中 ， 我 们 已 经 展示 了 几 个 使 用 图 案 来 填充 文本 的 例子 ， 也 在 最 后 
强调 了 一 些 其 他 的 文本 样式 。 第 2 章 中 也 使 用 描 边 的 文本 来 演示 了 paint- 
order 属性 。 
从 始 至 终 我 们 一 直 都 在 强调 ， 在 SVG 中 填充 和 描 边 文本 与 填充 形状 类 似 。 
在 大 多 数 情况 下 ， 确 实 是 这 样 。 但 是 ， 对 于 泻 染 服务 ， 还 是 会 有 一 些 不 同 
的 ， 因 为 文本 是 基于 对 象 边 界 盒 来 计算 的 。 本 章 将 更 加 详细 地 讲解 泻 染 服 
务 和 文本 。 
如 果 你 正 考虑 使 用 形状 来 替换 文本 ， 那 熟悉 绘制 文本 和 绘制 形状 之 间 的 差 
异 尤 为 重要 。 大 多 数 图 形 程序 提供 了 一 个 文本 到 路 径 的 转换 ， 这 样 可 以 保 
持 文 本 在 特定 字体 中 的 视觉 效果 ， 而 不 用 担心 必须 把 字体 和 你 的 图 形 一 起 
在 Web 上 分 发 ， 也 不 用 考虑 许多 浏览 器 在 演 染 文本 时 的 bug (特别 是 在 移 
动 设备 上 )。 依 赖 于 具体 的 实现 方式 ， 这 种 转换 可 能 因为 字母 形式 的 泻 染 方 
式 不 同 而 产生 细微 的 差别 ， 也 可 能 会 有 显著 的 改变 。 

把 文本 转换 为 路 径 会 使 得 文本 对 于 屏幕 阅读 器 ， 以 及 想 要 搜 

索 、 复 制 、 翻 译文 本 内 容 的 普通 用 户 不 可 访问 。 务 必要 为 任 

何 文本 形状 提供 一 个 机 器 可 读 的 替代 品 。 
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SVG 规范 中 有 许多 控制 文本 布局 的 选项 ， 其 中 有 一 些 是 借鉴 原来 的 CSS2 
规范 ， 有 一 些 对 于 SVG 来 说 是 新 的 但 CSS3 中 早已 采纳 ， 还 有 一 些 是 SVG 
特有 的 。 有 些 选 项 已 经 在 Web ili as PSL! 讨论 所 有 的 文本 布局 选项 
本 身 就 有 一 本 书 ', 所 以 本 章 中 的 例子 除了 在 指示 该 属性 支持 比较 差 时 外 , 不 
会 讲解 太 多 布局 创建 的 具体 细节 。 


12.1 边界 文本 


SVG 中 绘制 在 屏幕 上 的 每 个 元 素 都 有 一 个 边界 盒 。 虽 然 有 些 元 素 并 不 会 绘 
制 ， 组 元 素 以 及 其 他 容器 元 素 比 如 <use> 和 <svg> 同样 也 有 边界 盒 ， 这 些 容 
器 的 边界 合用 于 裁剪 、 庶 办 以 及 滤 镜 。 边 界 盒 始终 是 与 该 元 素 (包括 任何 
变换 ) 坐标 系 的 轴线 对 齐 的 矩形 。 


对 于 形状 ， 盒 子 始终 是 控制 形状 基本 几何 的 最 小 矩形 。 对 于 容器 ， 它 是 包 
含 所 有 子 组 件 的 最 小 矩形 。 对 于 文本 ， 它 是 包含 每 个 字符 的 en 盒子 的 最 小 
和 矩形。 


排版 中 的 en 盒子 是 每 个 字符 绘制 的 区 域 。 字 体 通 常 占 据 整 个 em 盒子 的 高 ， 
以 及 整个 字母 间距 确定 的 宽 。 在 许多 情况 下 ， 实 际 的 字符 只 占据 算 形 的 一 
小 部 分 。 对 于 其 他 字符 ， 字 母 可 能 延伸 到 矩形 外 ， 低 于 或 高 于 文本 中 同一 
行 的 其 他 字符 。 最 终 ， 你 填充 的 文本 区 域 可 能 并 没有 匹配 用 于 缩放 泻 染 服 
务 的 对 象 边界 盒 。 


例 12-1 定义 了 一 个 简单 的 条 纹 图 案 ， 缩放 到 对 象 边 界 盒 ， 且 使 用 它 填充 四 
个 不 同 的 文本 元 素 。 每 个 元 素 占据 绘制 图 形 的 不 同 空间 。 图 12-1 显示 了 它 
们 是 如 何 绘制 的 。 


例 12-1 使 用 对 象 边界 盒 图 和 案 填 充 文本 
<svg xmlns="http://www.w3.org/2000/svg" 
xmLns:xLink="http: //www.w3.org/1999/xlLink" 
width="400px" height="300px" viewBox="0 0 400 300" 
xmL: Lang="en"> 
<title>Text Bounding Box</title> 
<style type="text/css"> 
text { 
font-size: 50px; 
font-family: sans-serif; 
font-weight: bold; 
} 
</style> 






























































HE 1: 具体 来 说 是 SVG Text Layout， 作 者 及 出 版 社 与 本 书 完全 的 一 样 。 








174 | 第 12 章 


<pattern id="stripes" width="100%" height="20%" 
patternContentUnits="objectBoundingBox"> (1) 
<rect width="1" height="0.1" fill="indigo" /> 
<rect width="1" height="0.1" y="0.1" 


fill="royalBlue" /> ð 
</pattern> 
<defs> 
<path id="p" d="M250,150 L350,200 250,270" /> 
</defs> 
<g fill="url(#stripes)"> © 


<text x="50%" y="1em" dx="-10" 
text-anchor="end">Mixing</text> 
<text x="50%" y="1em" dx="10" 
text-anchor="start">BLOCK</text> (4) 
<text x="10%" y="3em" 
>Three <tspan x="10%" dy="1.2em" 
>line </tspan><tspan x="10%" dy="1.2em" 


>text</tspan></text> 日 
<text><textPath xlink:href="#p" 
>TextPath</textPath></text> (6) 
</g> 
</svg> 





Mixing BLOCK 


Three 
line 
text wr 


图 12-1; 四 个 使 用 相同 的 条 纹 图 案 填充 的 文本 元 素 


Tex, 
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O 每 个 图 案 磁 贴 延伸 到 边界 盒 整个 宽度 以 及 高 度 的 五 分 之 一 〈20% ) 。 

O 图 和 案 内 容 也 缩放 到 边界 盒 。 每 个 条 纹 是 边界 盒 高 度 的 十 分 之 一 〈0.1) 。 

© 组 元 素 中 应 用 图 案 来 填充 所 有 的 <text> 元 素 。 与 往常 一 样 ， 每 个 元 素 将 
基于 自己 的 边界 盒 填充 。 

O 前 两 个 元 素 水 平 对 齐 。 一 个 元 素 字母 大 小 写 混 合 ， 另 一 个 元 素 字母 全 部 
大 写 。 


O 下 一 个 元 素 使 用 定位 的 <tspan> 段 把 整个 文本 打破 使 它 跨 越 三 行 。 
O 最 后 一 个 文本 元 素 沿 着 <textPath> 排列 ， 大 约 占据 页 面 中 三 行文 本 的 


高 度 。 


图 12-1 中 要 注意 的 第 一 件 事 是 ， 条 纹 在 多 行 以 及 <textpPath> 文本 中 的 尺寸 
不 同 于 在 单行 文本 元 素 中 的 尺寸 。 这 些 元 素 的 边界 盒 更 大 ， 会 创建 更 大 的 
图 案 磁 贴 。 

如 果 仔 细 查 看 最 上 面 的 一 行 (两 个 单行 元 素 ) ， 你 会 注意 到 字母 从 上 到 下 
数 并 没有 五 对 条 纹 。 你 还 可 以 注意 到 两 个 单词 条 纹 的 尺寸 相同 ， 尽 管 实 际 
上 大 写字 母 不 会 低 于 基线 。 这 是 因为 计算 边界 盒 是 基于 每 个 字符 的 整个 em 
高 ， 即 使 使 用 的 字符 并 没有 填 满 整个 空间 。 

较 大 的 元 素 同 样 稍 小 于 它们 的 边界 盒 ， 尽 管 未 使 用 的 部 分 仅 占 据 较 大 元 素 
边界 盒 的 一 小 部 分 。 


对 于 <textPath> 以 及 其 他 旋转 字符 的 文本 元 素 ， 许 多 浏览 器 
(编写 本 书 时 ，Blink、WebKit 以 及 IE) 会 随 着 字母 旋转 整 
个 图 案 。 对 于 例 12-1， 这 将 导致 有 补丁 、 不 连续 的 条 纹 。 图 
12-1 是 在 Firefox (v37) Pie Zen. 





















































相 比 而 言 ， 如 果 你 把 文本 转换 为 路 径 ， 边 界 盒 将 是 每 个 <path> 元 素 的 最 小 
边界 盒 。 图 12-2 显示 了 使 用 Inkscape 中 把 对 象 转换 为 路 径 的 功能 的 结果 。 
每 一 个 字母 都 变 为 一 个 <path> 元 素 ， 因 此 在 形状 内 从 上 到 下 条 纹 缩放 且 排 
列 为 五 对 蓝 色 - 靛蓝 色 条 纹 。 


在 把 文本 转换 为 路 径 之 前 ， 例 12-1 中 的 SVG 代码 首先 必须 
替换 用 户 坐 标 中 所 有 百分比 长 度 和 em 单位 ， 因 为 它们 目前 
在 Inkscape (版 本 0.91) 中 都 不 支持 。 
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Mixing BLOCK 











12-2: 使 用 相同 的 条 纹 图 案 填 充 组 成 单个 字母 路 径 


要 想 让 最 终 的 外 观 与 原 效 果 更 加 接近 ， 可 以 通过 把 每 个 文本 块 内 所 有 的 
路 径 合 并 为 一 个 拥有 多 个 部 分 的 路 径 (在 Inkscape 中 ， 可 以 通过 选中 创 
建 <text> 元 素 的 组 并 使 用 合并 路 径 选 项 来 实现 )。 但 是 图 案 比 例 依 然 和 原 
<text> 有 一 些 偏差 。 文 本 的 边界 盒 扩展 到 了 字母 边界 之 外 ， 因 此 它 是 最 终 
路 径 的 边界 盒 。 

这 些 可 以 影响 你 边界 盒 图 案 缩放 的 因素 ， 将 便于 你 很 容易 地 调整 每 个 图 案 
磁 贴 的 尺寸 。 不 幸 的 是 ， 例 12-1 中 的 代码 ， 图 案 内 容 也 是 基于 对 象 边界 盒 
单位 度量 的 ， 它 直接 依赖 于 图 案 磁 贴 的 尺寸 。 

即使 你 不 需要 图 案 保 持 一 个 固定 的 宽 高 比 ， 你 也 可 以 使 用 viewBox 给 内 容 建 
立 一 个 独立 于 磁 贴 尺寸 的 完整 的 坐标 系 。preserveAspectRatio 设置 为 none 
会 使 正方 形 被 拉 伸 去 填 满 整个 磁 贴 ， 而 忽略 磁 贴 尺 寸 的 所 有 变化 。 就 像 对 
象 边界 盒 单 位 那样 ， 缺 乏 宽 高 比 控制 将 创建 一 个 扭曲 的 坐标 系 ， 但 是 对 于 
长 方形 条 纹 是 没有 问题 的 。 


正如 第 11 章 中 提 到 的 那样 ，40 版 本 之 前 的 Firefox 不 能 正确 
演 染 图 案 上 的 viewBox。 
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例 12-2 展示 了 对 于 条 纹 图 案 它 是 如 何 工 作 的 。 为 了 演示 图 案 内 容 和 图 案 磁 








贴 之 间 的 独立 性 ， 通 过 使 用 xLink:href 复制 图 案 内 容 创 建 了 两 种 不 同 的 











案 一 一 一 种 粗 条 纹 ， 一 种 细 条 纹 。 图 12-3 显示 了 两 个 版 本 的 图 案 。 
例 12-2 不 保持 宽 高 比 ， 使 用 viewBox 创建 可 缩放 的 边界 盒 图 案 


<svg xmlns="http://www.w3.0rg/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="400px" height="70px" viewBox="0 0 400 70" 
xml: Lang="en"> 
<title>Adjustable Stripes</title> 
<style type="text/css"> 
text { 
font-size: 50px; 
font-family: sans-serif; 
font-weight: bold; 














} 
</style> 
<pattern id="thick-stripes" width="100%" height="40%" 
viewBox="0 0 2 2" preserveAspectRatio="none"> 
<rect width="2" height="1" fill="indigo" /> 
<rect width="2" height="1" y="1" 
fill="royalBlue" /> 
</pattern> 
<pattern id="thin-stripes" height="12.5%" 
xLink:href="#thick-stripes" /> 
<text x="50%" y="1em" dx="-10" fill="url(#thick-stripes)" 
text-anchor="end">Stripy</text> 
<text x="50%" y="1em" dx="10" fill="url(#thin-stripes)" 
text-anchor="start">Stripy</text> 
</svg> 


医 

















Stripy Stripy 








12-3: 使 用 不 同 尺寸 条 纹 图 案 填充 的 文本 元 素 


图 案 中 的 每 个 长 方形 占据 viewBox 高 度 的 一 半 以 及 整个 宽度 。 边 界 盒 高 度 范 
围 之 内 水 平 条 纹 的 数量 因此 只 由 图 案 上 的 height 属性 控制 ， 且 很 容易 在 引 





用 第 一 个 图 案 的 第 二 个 <pattern> cs LTE. 











12.2 中途 切换 样式 





虽然 例 12-1 中 的 每 个 <text> 元 素 都 会 创建 自己 绘制 时 的 对 象 边界 盒 ， 但 多 
行文 本 中 的 单个 <tspan> 元 素 不 会 。 也 就 是 说 单个 <tspan> 元 素 可 以 设置 与 








剩余 文本 不 同 的 填充 值 。 











个 <text> 元 素来 缩放 的 ， 而 不 是 它 本 身 。 








如 果 <tspan> 的 填充 使 用 的 是 对 象 边界 盒 缩 放 ， 它 是 基于 整 


例 12-3 演示 了 这 种 使 用 边界 盒 渐 变 来 填充 <text> 元 素 中 三 个 单独 的 
<tspan> 元 素 的 效果 。 它 还 提供 了 一 个 可 读 性 稍 强 的 、 使 用 图 案 来 填充 文本 








的 例子 。 它 没有 使 用 粗 条 纹 来 填充 ， 而 是 使 用 一 个 更 加 精细 的 纹理 








DREJ 








创建 粉笔 写 在 黑板 上 的 效果 。 图 12-4 显示 了 最 终 效果 。 





Text Effects 


Textured Effects 
Textured Text 














B 12-4: 图 案 和 渐变 填充 的 多 行文 本 
例 12-3 ”使 用 对 象 边界 盒 图 和 案 和 渐变 来 填充 文本 


<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="10cm" height="5cm" 
xml: Lang="en"> 
<title>Chalkboard Text</title> 
<style> 
text { 
font-family: cursive; 
font-weight: bold; 
font-size: 9mm; 
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font-size-adjust: 0.54; o 


} 
.chalk { 

fill: url(#chalk-texture); 
} 


.chalk-marks { 

fill: white; 

fill-opacity: 0.8; 

stroke: silver; 

stroke-width: 0.2px; 
} 
ehighlight { 

fill: url(#highlight-gradient); 
} 
-blackboard { 

fill: black; 
} 

</style> 
<pattern id="chalk1" class="chalk-marks" 
patternUnits="userSpaceOnUse" 

width="9" height="6"> ð 
<circle r="1" cx="0" cy="3" /> 
<circle r="1" cx="1" cy="5" /> 
<circle r="1" cx="2" cy="1" /> 
<circle r="1" cx="3" cy="2" /> 
<circle r="1" cx="4" cy="5" /> 
<circle r="1" cx="5" cy="4" /> 
<circle r="1" cx="6" cy="0" /> 
<circle r="1" cx="7" cy="6" /> 
<circle r="1" cx="8" cy="3" /> 


</pattern> 
<pattern id="chalk2" xlink:href="#chalk1" 
x="2" width="5" height="5"/> © 


<pattern id="chalk3" xlink:href="#chalk1" 
y="4" width="7" height="7"/> 
<pattern id="chalk-texture" patternUnits="userSpaceOnUse" 
width="315" height="210"> @ 
<rect fill="url(#chalk1)" width="315" height="210"/> 
<rect fill="url(#chalk2)" width="315" height="210"/> 
<rect fill="url(#chalk3)" width="315" height="210"/> 
</pattern> 


<linearGradient id="highlight-gradient" x2="0" y2="1"> 





<stop stop-color="gold" offset="0.3" /> (5) 
<stop stop-color="deeppink" offset="0.7" /> 
</linearGradient> 
<rect class="blackboard" width="100%" height="100%" /> 
<text y="5mm" class="chalk" textLength="29cm"> O 
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<tspan x="3mm" dy="1em"><tspan 
class="highlight">Textured</tspan> (7) 
Text Effects</tspan> 
<tspan x="3mm" dy="1.6em">Textured 
<tspan class="highlight">Text</tspan> Effects</tspan> 
<tspan x="3mm" dy="1.6em">Textured 
Text <tspan class="highlight">Effects</tspan></tspan> 
</text> 
</svg> 
O 你 不 必 使 用 px 或 pt 来 设置 文本 的 大 小 : SVG 所 会 缩放 到 使 用 合适 的 度 
量 单位 ， 文 本 也 是 如 此 。font-size-adjust 的 设置 是 为 了 保证 无 论 实际 
使 用 什么 字体 ， 字 体 的 大 小 可 以 保持 大 致 相同 。0.54 的 值 是 基于 Comic 
Sans MS HY, ‘Exe Windows 计算 机 上 大 多 数 浏 览 器 默认 的 cursive 字体 。 


O 基础 的 粉笔 图 案 是 通过 一 小 块 图 案 磁 贴 内 九 个 位 置 不 规律 的 白色 和 灰色 
点 来 创建 的 。 圆 的 样式 是 在 <pattern> 上 的 chalk-marks 类 中 设置 的 。 


O 为 了 使 图 案 更 加 紧密 、 更 加 不 规则 ， 它 被 复制 了 两 次 ， 但 每 个 图 案 磁 贴 
的 尺寸 和 偏 移 都 不 一 样 。 


O 聚合 的 图 案 是 通过 把 三 个 粉笔 标记 图 案 放 在 一 起 布局 来 创建 的 。 聚 合 的 
图 案 使 用 userSpace0nuse 单位 来 定义 一 个 更 大 的 图 案 磁 贴 ， 这 使 它 足够 
容纳 重复 偶数 次 的 各 层 图 案 。 


© 用 于 高 亮 tspan 的 渐变 是 一 个 简单 的 缩放 到 对 象 边界 盒 (gradientUnits 
默认 值 ) 的 垂直 线性 渐变 。 约 前 三 分 之 一 是 纯 金 色 (0.3 的 偏 移 ) ， 后 三 
分 之 一 ( 偏 移 大 于 0.7) 是 纯 粉 色 ， 且 在 两 者 之 间 有 一 个 过 渡 。 


O 文本 在 一 个 <text> 元 素 内 。textLength 属性 用 于 调节 三 行文 本 的 总 长 度 
使 其 略 小 于 三 倍 SVG 的 宽度 。 


O 三 个 <tspan> 元 素 使 文本 折 为 三 行 。 每 一 行 中 ， 有 highlight 类 的 <tspan> 
使 包含 在 其 中 的 单词 使 用 不 同 的 填充 。 


图 12-4 内 渐变 填充 的 单词 非常 明显 地 展示 了 整个 <text> 元 素 作 为 边界 盒 时 
是 什么 样 的 。 而 且 ， 在 粉笔 纹理 中 这 同样 很 明显 。 如 果 每 一 行 的 文本 分 别 
在 一 个 元 素 内 ， 使 用 相同 的 图 案 填 充 时 ， 填 充 中 的 裂缝 和 不 规则 的 点 将 在 
完全 相同 的 位 置 。 本 例子 中 由 于 每 个 组 成 它 的 图 案 都 是 基于 其 自己 的 大 小 
来 重复 的 ， 且 恰好 没有 完全 匹配 一 行文 本 的 高 度 ， 所 以 结果 看 起 来 是 随机 
的 ， 如 图 12-5 所 示 ， 图 中 放大 显示 了 前 两 行 中 的 最 后 一 个 单词 。 
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812-5: 伪 随 机 纹理 图 案 的 特写 视角 


例 12-3 使 用 浏览 器 默认 的 cursive 字体 。 通 常情 况 下 ， 这 种 做 法 并 不 推荐 ， 
因为 这 些 字体 在 不 同 浏 览 器 和 操作 系统 之 间 可 能 会 发 生 很 大 变化 。 通 常 做 法 
是 给 定 一 个 font-family 名 字 列 表 ， 或 者 使 用 Web 字体 来 确保 正确 的 字体 是 
可 用 的 。 然 而 ， 有 时 这 些 方法 都 不 起 作用 ， 所 以 倡导 浑 染 一 致 性 的 其 他 代码 
属性 也 值得 我 们 去 关注 , 比如 textLength 属性 和 font-size-adjust 样式 。 


textLength 属性 (把 文本 压缩 或 拉 伸 到 给 定 的 长 度 ) 在 浏览 
器 中 有 很 多 bug， 且 在 所 有 旧版 本 的 SVG 工具 中 都 不 支持 。 
这 里 使 用 它 的 方式 (在 父 级 <text> 元 素 上 定义 ) 在 Firefox 
和 正中 支持 。 换 名 话说，Blink 和 WebKit 浏览 器 不 会 调整 
<tspan> 中 的 内 容 ， 除 非 textLength 属性 设置 在 每 个 子 元 素 
E. Firefox 会 忽略 <tspan> 上 的 textLength, IE Æ KE 
调整 时 不 能 正确 居中 或 两 端 对 齐 文本 。 

font-size-adjust 属性 ， 用 于 使 浏览 器 保持 字体 的 ex-height 
而 不 是 em-height (通过 指定 两 者 之 间 的 比率 )， 目 前 只 有 
Firefox 浏览 器 支持 。 
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在 符合 标准 的 浏览 器 中 ， 这 些 设置 可 以 确保 即使 使 用 的 字体 完全 不 同 ， 也 


























可 以 保持 整体 的 布局 ， 如 图 12-6 所 示 。 在 其 他 浏览 器 中 ， 文 本 可 能 会 没有 


“ a 
Test Effects 

F ve 
Jextared la fects 








填充 整个 宽度 ， 或 距离 边缘 大 近 。 





fevtared fest 














图 12-6: 不 同 字体 中 ， 图 案 和 渐变 填充 的 多 行文 本 


CSS 与 SVG 
使 用 图 形 填充 文本 
例 11-4 中 图 片 填充 的 文本 和 例 12-3 中 的 有 纹理 的 文本 对 于 标题 或 其 他 大 
型 文本 有 很 好 的 效果 。 为 了 在 非 SVG 文本 中 实现 该 效果 ， 基 于 WebKit 的 
浏览 器 (包括 Safari, Chrome 以 及 新 版 本 的 Opera) 都 支持 不 标准 的 属性 
-webkit-background-clip， 因 此 可 以 用 它 来 创建 类 似 的 效果 。 


标准 的 background-clip 属 性 允许 把 背景 裁剪 到 元 素 的 content-box、 
padding-box 或 border-box。 试 验 阶段 的 WebKit 选项 还 支持 把 背景 裁剪 到 
元 素 的 文本 内 容 。 结 合 透明 文本 〈 使 用 WebKit 特定 的 webkit-text-fill- 
color 设置 ， 所 以 对 其 他 浏览 器 没有 影响 ) 可 以 创建 图 片 填充 的 文本 。 


编写 本 书 时 ， 还 没有 现成 的 或 处 于 草案 阶段 的 Web 标准 来 给 SVG 之 外 的 
文本 填充 图 片 或 图 案 。 然 而 ， 过 去 一 直 在 反复 讨论 对 CSS 样式 的 文本 使 用 
fill 和 stroke。 这 也 可 能 通过 元 素 及 背景 图 片 的 混合 和 合成 新 选项 来 实现 
相似 的 效果 。 
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第 13 章 
绘制 线条 








之 前 渐变 和 图 和 案 的 例子 几乎 都 是 使 用 fitl 属性 来 把 它 绘制 到 形状 上 的 。 其 
实 我 们 本 书 中 提 到 的 渲染 服务 同样 可 以 用 于 stroke 属性 。 

在 描 边 上 使 用 泻 染 服务 会 造成 一 些 新 的 难题 ， 这 就 是 我 们 把 绘制 线条 单独 
作为 一 章 的 原因 。 这 里 主要 介绍 难点 ， 也 会 给 出 一 些 通过 泻 染 描 边 来 创建 
的 独特 效果 的 例子 。 我 们 还 会 介绍 在 SVG 2 中 提出 的 一 些 新 特性 ， 这 些 特 
性 让 线条 绘制 更 简单 。 


13.1 超出 边缘 的 部 分 


我 们 之 前 简要 的 提 过 ， 描 边 不 一 定 只 能 使 用 纯色 。 和 Fill 属性 一 样 ， 
stroke 属性 可 以 使 用 一 个 url() 函数 来 通过 演 染 服务 (渐变 或 图 案 ) 的 id 
值 来 引用 它 。 你 也 可 以 使 用 一 个 备用 的 颜色 ， 以 防 泻 染 服务 出 现 问题 ， 而 
且 很 快 你 就 能 看 到 这 种 备用 颜色 的 用 武之 地 。 

在 要 使 用 泻 染 服 务 时 ， 你 可 能 会 想起 描 边 是 一 个 次 要 形状 ， 依 赖 于 定义 它 
的 元 素 ， 而 不 是 用 钢笔 或 刷子 画 的 线 。 目 前 图 和 案 和 新 变 还 不 能 沿 着 路 径 绘 
制 。 与 绘制 形状 的 填充 类 似 ， 描 边 是 从 类 似 墙 纸 的 渲染 服务 内 容 中 裁剪 出 
来 的 。 

在 描 边 中 使 用 渲染 服务 时 ， 有 两 个 地 方 让 设计 者 感到 头疼 : 


。 演 染 服务 使 用 的 objectBoundingBox 单位 不 包括 描 边 区 域 
。 所 有 的 演 染 服务 都 会 创建 一 个 不 受 形状 或 描 边 方向 影响 的 矩形 绘制 区 域 
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这 些 难 题 并 非 总 是 令 人 费解 的 。 对 于 许多 形状 ， 渐 变 或 图 案 描 边 都 能 工作 
得 很 好 。 例 13-1 使 用 第 6 章 中 基本 的 水 平 红 蓝 渐变 来 绘制 一 个 描 边 很 宽 的 
矩形， 如 图 13-1 Aras. 


il 13-1 在 和 矩形 中 使 用 渐变 来 绘制 描 边 
<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="1.5in" > 
<title xml: lang="en">Gradient on a Stroke</title> 
<linearGradient id="red-blue" > 
<stop stop-color="red" offset="0"/> 
<stop stop-color="LightSkyBlue" offset="1"/> 
</linearGradient> 
<rect width="80%" height="50%" x="10%" y="25%" 
stroke-width="20%" stroke="url(#red-blue)" 
fill="none" /> 
</svg> 

















13-1; (EPR HEMT SEHD BI ABTS 


渐变 矢量 的 长 短 是 根据 长 方形 的 几何 尺寸 确定 的 ， 而 不 是 描 边 的 尺寸 ， 但 
是 这 种 渐变 平滑 的 比较 难以 判断 。 如 果 将 spreadMethod 的 值 更 改 为 repeat, 
这 就 会 变 得 很 明显 ， 如 图 13-2 所 示 。 每 条 边 上 描 边 的 一 半 是 在 渐变 矢量 外 
部 ， 而 在 重复 的 区 域内 。 

















13-2: 使 用 重复 线性 渐变 描 边 的 长 方形 
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聚焦 未 来 

多 个 描 边 
我 们 已 经 介绍 了 SVG 中 如 何 层 登 多 个 填充 ， 如 何 创 建 多 个 堆 登 的 渐变 或 图 
案 来 突出 单独 设置 的 纯色 。 描 边 中 也 将 实现 同样 的 功能 甚至 会 有 更 多 功能 。 
因为 每 个 描 边 可 能 会 有 不 同 的 宽度 或 线条 图 案 ， 其 至 纯色 描 边 也 可 以 有 效 
地 分 层 。 


确切 的 细节 在 编写 本 书 时 还 没有 最 终 敲 定 ， 但 是 SVG 2 很 可 能 会 采用 类 似 
于 CSS 分 层 背 景 的 语法 。 不 管 任何 属性 都 将 指定 为 一 个 值 列 表 ， 如 果 一 个 
属性 的 列表 长 度 和 主 (stroke) 属性 不 同 ， 它 将 会 根据 需要 进行 重复 。 所 
以 ， 如 果 想 要 所 有 层 都 有 OS 的 不 透明 度 ， 你 只 需要 指定 该 值 一 次 。 


与 填充 类 似 ， 描 边 的 另 一 种 新 内 容 是 将 支持 直接 在 stroke 属性 内 使 用 CSS 
图 片 数据 类 型 一 一 渐变 函数 以 及 引用 其 他 图 片 文件 。 和 SVG 渐变 一 样 ， 最 
终 描 边 区 域 是 从 渐变 填充 的 矩形 中 裁剪 ， 而 不 是 从 沿 着 描 边 方向 的 渐变 上 
裁剪 。 


13-2 中 锐利 的 重复 边缘 并 不 是 偶然 的 。 因 此 你 可 能 会 认为 object BoundingBox 
单位 并 不 是 一 个 很 大 的 障碍 。 确 实 如 此 ， 除 非 你 是 给 线条 而 非 形 状 描 边 。 


13.2 ZF 


例 13-2 使 用 相同 的 红 蓝 线 性 渐变 给 一 系列 不 同方 向 的 直线 描 边 。 因 为 直线 
不 能 被 填充 ， 通 常 使 用 一 条 粗 的 渐变 描 边 来 实现 我 们 想 要 的 效果 。 


例 13-2 在 直线 上 使 用 渐变 来 绘制 描 边 
<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="3in" > 
<title xml: lang="en">Gradient on Straight Lines</title> 
<linearGradient id="red-blue" > 
<stop stop-color="red" offset="0"/> 
<stop stop-color="lLightSkyBlue" offset="1"/> 
</linearGradient> 
<g fill="none" stroke-width="0.5in" 
stroke="url(#red-blue) purple" > 
<line x1="10%" x2="90%" y1="10%" y2="10%" /> (2) 
<line x1="90%" x2="90%" y1="25%" y2="75%" /> 
<line x1="90%" x2="10%" y1="90%" y2="90%" /> 
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<line x1="10%" x2="10%" y1="75%" y2="25%" /> 
<line x1="30%" x2="70%" y1="25%" y2="75%" /> © 
<line x1="70%" x2="30%" y1="25%" y2="75%" /> 
</g> 
</svg> 








@ 样式 属性 通过 表现 属性 应 用 在 包含 每 条 线 的 组 元 素 上 。 描 边 值 包括 一 个 
对 新 变 和 备用 的 纯色 的 引用 。 


O 最 初 的 四 条 线 括 起 绘制 区 域 ， 横 穿 过 顶部 ， 然 后 沿 着 右边 向 下 ， 然 后 沿 
着 底部 水 平 返 回 ， 最 后 沿 着 左边 向 上 。 


O 最 后 两 条 是 对 角 线 ， 一 条 从 左上 到 右 下 ， 男 一 条 从 右上 到 左下 。 
代码 看 似 简 单 ， 但 如 图 13-3 所 示 ， 结 果 并 不 是 我 们 期 望 的 。 








图 13-3: 使 用 线性 渐变 或 备用 的 颜色 描 边 的 线 











为 什么 这 么 多 线 是 纯 紫 色 描 边 呢 ? 这 是 因为 完全 水 平 或 垂直 的 线 没有 边界 
盒 区 域 。 没 有 边界 盒 区 域 就 意味 着 没有 边界 盒 渐变 。 如 果 我 们 没有 指定 备 
用 的 颜色 ， 描 边 将 一 直 都 不 可 见 。 


直觉 上 这 似乎 是 渐变 的 极端 情况 。 毕 竞 ， 即 使 水 平 线 没 有 任何 高 度 ， 但 是 
它 有 宽度 。 那 不 正好 是 水 平 线性 渐变 吗 ?对 于 生 直 线 ， 不 应 该 至 少 一 边 使 
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图 灵 社 区 会 员 ChenyangGao(2339083510@qq.com) $5 





用 红色 填补 ， 另 一 边 使 用 蓝 色 填补 吗 ? 


难点 的 来 产 是 浑 染 服务 的 实现 方式 ， 因 为 浑 染 的 矩形 块 被 变换 到 适应 边界 
盒 。 变 换 导 致 任何 维度 都 替 塌 为 0， 这 造成 浏览 器 内 部 数学 计算 时 产生 除数 
为 零 的 错误 。 为 了 避免 这 个 问题 ，SVG 规范 中 把 零 宽 度 或 零 高 度 的 边界 盒 
当 作 边界 盒 泻 染 服务 的 一 种 错误 。 浏 览 器 会 使 用 相同 的 方式 响应 错误 ， 如 
果 找 不 到 泻 染 服务 ， 就 使 用 备用 的 颜色 。 


相 比 之 下 ， 对 角 线 是 使 用 渐变 绘制 的 ， 即 使 线条 依然 没有 填充 区 域 ， 因 为 
边界 盒 是 与 坐标 系 轴线 对 齐 、 可 以 包含 对 象 的 最 小 矩形 。 对 于 有 角度 的 线 ， 
它 就 是 矩形 的 对 角 线 。 虽 然 两 条 对 角 线 绘制 的 方向 相反 ， 但 它们 有 相同 的 
边界 盒 ， 所 以 两 者 之 间 的 渐变 是 一 致 的 。 


当 人 们 思考 线条 上 的 渐变 时 ， 他 们 通常 想到 的 是 像 图 13-4 中 显示 的 那样 。 
每 个 渐变 从 线 的 一 端 到 男 一 端 ， 方 向 和 线条 绘制 的 方向 一 致 。 











13-4; 使 用 方向 匹配 的 线性 渐变 来 描 边 的 线条 
你 可 能 已 经 猜 到 了 ，SVG 可 以 创建 图 13-4 的 效果 。 然 而 ， 它 需要 比例 
13-2 中 更 多 的 标记 。 你 不 能 给 渐变 使 用 对 象 边界 盒 单 位 ， 所 以 需要 使 用 


userSpaceOnUse 渐变 。 然 后 需要 让 渐变 矢量 与 线条 的 位 置 、 方 向 以 及 长 短 
都 一 一 匹配 。 
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有 两 种 可 以 实现 的 方式 。 例 13-3 中 显示 了 图 13-4 使 用 的 代码 。 它 给 每 个 
<Line> 都 创建 了 一 个 单独 的 <LinearGradient>， 并 设置 渐变 矢量 的 位 置 属 
性 与 对 应 的 线 相 同 。 


例 13-3 ”匹配 线性 浙 变 和 直线 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xlink" 
width="4in" height="3in" > 
<title xml:lang="en">Gradients Made to Measure 
for Straight Lines</title> 
<LinearGradient id="red-blue" 
gradientUnits="userSpaceOnUse"> (1) 
<stop stop-color="red" offset="0"/> 
<stop stop-color="LightSkyBlue" offset="1"/> 
</linearGradient> 
<g fill="none" stroke-width="0.5in" > © 
<linearGradient xlink:href="#red-blue" id="g1" 
x1="10%" x2="90%" y1="10%" y2="10%" /> 
<line x1="10%" x2="90%" y1="10%" y2="10%" 
stroke="url(#g1) purple"/> @ 
<linearGradient xlink:href="#red-blue" id="g2" 
x1="90%" x2="90%" y1="25%" y2="75%" /> 
<line x1="90%" x2="90%" y1="25%" y2="75%" 
stroke="url(#g2) purple"/> 
<linearGradient xlink:href="#red-blue" id="g3" 
x1="90%" x2="10%" y1="90%" y2="90%" /> 
<line x1="90%" x2="10%" y1="90%" y2="90%" 
stroke="url(#g3) purple"/> 
<linearGradient xlink:href="#red-blue" id="g4" 
x1="10%" x2="10%" y1="75%" y2="25%" /> 
<line x1="10%" x2="10%" y1="75%" y2="25%" 
stroke="url(#g4) purple"/> 
<linearGradient xlink:href="#red-blue" id="g5" 
x1="30%" x2="70%" y1="25%" y2="75%" /> 
<line x1="30%" x2="70%" y1="25%" y2="75%" 
stroke="url(#g5) purple"/> 
<linearGradient xlink:href="#red-blue" id="g6" 
x1="70%" x2="30%" y1="25%" y2="75%" /> 
<line x1="70%" x2="30%" y1="25%" y2="75%" 
stroke="url(#g6) purple"/> 





© 


</g> 
</svg> 
@ 2 HW He EE A EE Ao gradientUnits 的 值 设 为 user- 
SpaceOnUse， 它 将 会 被 引用 它 的 渐变 继承 。 
O 不 必 在 组 元 素 上 设置 stroke 的 值 ， 每 个 元 素 都 需要 一 个 单独 的 描 边 属性 
来 引用 定制 的 渐变 。 
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© 4% <linearGradient> ILR Ah A — 15 | Fe PR xLink: href 属性 、 
一 个 唯一 的 id 以 及 与 对 应 的 <line> 相 匹 配 的 x1, x2. y1, y2 等 属性 。 
O 每 条 线 都 有 一 个 通过 表现 属性 设置 的 正确 的 描 边 渐变 。 备 用 的 颜色 是 为 
了 以 防 万 一 ， 但 不 会 被 使 用 ， 除 非 我 们 产生 了 错误 。 
例 13-3 中 代码 的 主要 不 足 之 处 是 有 太 多 重复 。 例 如 ，<Line> 和 <linear- 
Gradient> 上 重复 的 属性 在 你 想 要 改变 它 的 位 置 时 都 要 更 新 两 次 。 但 如 果 你 
第 一 时 间 就 使 用 基于 数据 的 脚本 来 生成 线条 ， 这 种 结构 是 相当 有 效 的 。 你 
可 以 创建 一 个 把 数据 设置 为 元 素 上 各 种 属性 的 函数 ， 然 后 运行 两 次 ， 一 次 
用 在 线 上 ， 一 次 用 在 渐变 上 。 


如 果 你 的 <Line> 元 素 部 分 位 置 属性 使 用 的 是 默认 值 ， 一 定 要 
记 住 <LinearGradient> 上 x2 的 默认 值 与 之 不 同 (100%， 而 
不 是 0)。 














例 13-3 中 所 用 方法 的 另 一 个 限制 是 DOM 元 素 的 数量 明显 增加 了 。 如 果 动 
态 图 形 中 有 大 量 的 线条 和 渐变 ， 网 页 会 变 得 很 慢 。 


调整 渐变 和 线 的 男 一 种 方式 是 使 用 单个 渐变 ， 然 后 让 所 有 的 线 都 沿 着 它 绘 
制 。 然 后 ， 使 用 变换 来 把 它们 调整 到 合适 的 尺寸 和 位 置 。 例 13-4 中 我 们 使 
用 了 这 种 方式 。 由 于 SVG 1.1 中 变换 必须 使 用 用 户 单位 定义 ， 不 能 使 用 百 
分 比 ， 绘 制 区 域 必须 重新 使 用 viewBox 定义 并 调整 数值 。 结 果 ， 如 图 13-5 
所 示 的 最 终 SVG 并 没有 和 图 13-4 完全 匹配 ， 但 是 非常 接近 。 


例 13-4 ”变换 线条 的 绘制 来 匹配 线性 渐变 
<svg xmlns="http://www.w3.0rg/2000/svg" xml:lang="en" 
width="4in" height="3in" viewBox="0 0 100 75"> (1) 
<title xml: lang="en">Userspace Gradient on 
Transformed Straight Lines</title> 
<linearGradient id="red-blue" gradientUnits="userSpaceOnUse"> @ 
<stop stop-color="red" offset="0"/> 
<stop stop-color="lightSkyBlue" offset="1"/> 





























</linearGradient> 
<g fill="none" stroke-width="12" 
stroke="url(#red-blue) purple" > © 
<Line x2="100%" 
transform="translate(10,7.5) scale(0.8,1)" /> @ 


<Line x2="100%" 
transform="translate(90,18.75) 
rotate(90) scale(0.375,1)" /> (5) 
<line x2="100%" 
transform="translate(90,67.5) scale(-0.8,1)" /> O 
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<line x2="100%" 
transform="translate(10,56.25) 
rotate(-90) scale(0.375,1)" /> 
<line x2="100%" 
transform="transLlate(30,18.75) 
rotate(45) scale(@.5315,1)" /> 
<line x2="100%" 
transform="translate(70,18.75) 
rotate(135) scale(@.5315,1)" /> 

















13-5: 使 用 渐变 给 线 描 边 ， 并 把 它 变换 到 合适 的 位 置 
@ viewBox 使 用 100 个 单位 的 宽度 ， 所 以 水 平 上 的 百分比 可 以 直接 转换 为 
用 户 单位 值 。 但 垂直 百分比 需要 缩放 到 70 个 单位 高 度 。 


O 我 们 只 需要 一 个 使 用 userSpaceOnUse 单位 的 渐变 。 渐 变 矢 量 使 用 默认 的 
排列 方向 : 水 平 从 0 到 100%, 


© 单独 的 一 个 stroke 值 设置 在 包含 所 有 线 的 组 元 素 上 。 同 样 ， 备 用 颜色 是 
以 备 不 时 之 需 。 用 户 空间 渐变 应 该 始终 提供 有 效 的 结果 。 
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© 每 个 <line> 元 素 都 有 相同 的 位 置 属 性 : x2="100%" 用 于 匹配 <linear- 
Gradient> 上 的 默认 属性 。 线 条 的 实际 尺寸 和 位 置 是 通过 <transform> 属 
性 控制 的 。 

O 变换 按照 一 个 特定 的 顺序 排列 ， 以 确保 它们 不 会 以 不 可 预见 的 方式 互相 
影响 : 首先 ， 原点 ( 线 的 起 点 ) 被 移动 到 一 个 合适 的 位 置 ， 然 后 把 它 旋 
转 到 正确 的 方向 ， 最 后 缩放 它 的 长 度 (x 轴 是 在 变换 后 的 坐标 系 中 )。 

O 为 了 禁 换 180 度 的 旋转 ， 右 到 左 的 渐变 使 用 一 个 负 的 缩放 值 来 创建 。 

通过 这 种 方式 ， 你 不 需要 创建 任何 额外 的 元 素 。 但 你 必须 完全 重新 定义 图 

形 的 几何 形状 。 如 果 你 事先 知道 渐变 是 图 形 必 不 可 少 的 部 分 ， 并 且 可 以 提 

前 规划 好 ， 这 可 能 并 不 是 一 个 很 大 的 障碍 。 但 像 这 样 重 写 一 个 图 形 使 

用 变换 来 替换 通过 位 置 属性 定义 的 代码 一 一 通常 带 来 的 麻烦 多 于 好 人 处。 



































聚焦 未 来 

创建 一 个 描 边 边界 盒 
正如 你 现在 知道 的 ， 给 描 边 使 用 渔业 服务 的 一 个 最 大 的 限制 是 对 象 边 界 使 
不 包含 描 边 。SVG 2 中 一 个 最 值得 期 待 的 变化 是 可 以 指定 包含 描 边 区 域 的 
KAARE. 
UREHEALARASRRAN HLH, MKAABREARMELALE 
义 。 这 将 允许 相同 的 渐变 或 图 案 可 以 恰好 适应 填充 边界 盒 、 描 边 边界 盒 、 
其 至 用 户 空间 。 但 这 些 依 然 是 “盒子 ”区 域 : 与 坐标 系 水 平和 重 直 的 轴 对 
齐 的 徐 形 。 要 创建 沿 着 线 的 方向 的 渐变 ， 你 依然 需要 例 13-3 或 例 13-4 中 使 
用 的 方法 。 实 际 上 沿 着 线条 曲率 的 渐变 需要 SVG 当前 的 演 染 工作 进行 更 深 
层 的 改变 ， 且 短期 内 还 不 可 预期 。 
定义 渔 染 服务 所 使 用 的 盒子 的 确切 语法 在 编写 本 书 时 还 没有 最 终 敲 定 。 但 
预期 是 直接 在 stroke (或 fiLL) 的 简写 属性 中 定义 ， 或 作为 一 个 单独 的 样 
式 属性 。 


13.3 ”使 用 坐标 空间 

除了 作为 沿 着 直线 的 渐变 的 替代 品 (虽然 并 不 完美 )， 用 户 空 间 描 边 渐变 有 
着 更 多 的 应 用 。 在 数据 可 视 化 中 ， 它 们 可 以 创建 根据 值 来 改变 数据 线 外 观 
的 效果 。 例 13-5 演示 了 这 种 效果 。 它 创建 了 一 个 通用 的 状态 监控 仪表 盘 ， 
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其 中 有 一 条 线 用 于 标记 变化 值 不 应 达到 100%: 随 着 线条 距离 最 大 值 越 近 ， 
它 的 颜色 从 绿色 变 为 黄色 再 变 到 红色 。 


图 形 的 基本 框架 一 一 包括 渐变 一 一 定义 在 标记 内 ， 而 数据 是 通过 脚本 插入 
的 。 在 实践 中 ， 数 据 可 能 来 自 某 种 Web 服务 器 。 在 该 例子 中 ， 数 据 是 随机 
生成 的 。 图 13-6 显示 了 一 种 可 能 的 数据 图 案 。 


例 13-5 使 用 渐变 来 给 折线 图 添加 信息 
<svg xmlns="http://www.w3.org/2000/svg" 

width="4in" height="3in" 

xml:lang="en"> 

<title>Stroked Gradient as Status Indicator</title> 

<svg X="0.6in" y="0.5in" width="3.6in" height="2in" 
viewBox="0 0 180 100" 
style="overflow: visible; font: 10px sans-serif;"> (1) 
<linearGradient id="status" y1="100%" y2="0%" x2="0%" 











gradientUnits="userSpaceOnUse"> (2) 
<stop stop-color="limegreen" offset="0.4"/> 
<stop stop-color="yellow" offset="0.8"/> © 
<stop stop-color="red" offset="0.95"/> 
</linearGradient> 


<rect stroke="black" fill="dimGray" 
width="100%" height="100%" /> 
<g text-anchor="end" dominant-baseline="middle" 
transform="translate(-2,0)"> (4) 
<desc>Y-axis tick labels</desc> 
<text y="100">0%</text> 
<text y="80">20%</text> 
<text y="60">40%</text> 
<text y="40">60%</text> 
<text y="20">80%</text> 
<text y="0">100%</text> 
</g> 
<g text-anchor="middle"> 
<text x="50%" dy="-1em" font-size="12px" 
text-decoration="underline" 
>Status monitor</text> 
<text x="50%" y="100%" dy="1em">Time</text> 
</g> 


<polyline id="dataline" stroke="url(#status)" 
stroke-linejoin="bevel" 


stroke-width="2.5" fill="none" /> (5) 
</svg> 
<script><! [CDATA[ 
(function(){ 
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var n=19, 
dx=10, 
maxY = 100; © 


var data = new Array(n), 
points = new Array(n); 
for (var i=0; i<n; i++) { 
data[i] = [i, Math.random()]; 
points[i] = [i*dx, maxY * (1 - data[i][1])]; (7) 


var dataline = document.getElementById("dataline"); 
dataline.setAttribute("points", points.toString() ); @ 
pHo 
]]> </script> 
</svg> 





Status monitor 
100% 


80% 
60% 
40% 
20% 

0% 





Time 











13-6: 使 用 描 边 渐变 来 强调 变化 值 的 数据 图 表 


O RAW <svg> 用 于 创建 一 个 完全 匹配 图 表 中 数据 区 域 大 小 的 用 户 空间 坐 
标 系 。viewBox 应 用 了 一 个 自 定义 坐标 系 ， 包 括 100 个 单位 的 高 ， 这 样 
可 以 很 容易 地 转换 为 百分比 值 。 

@ <linearGradient> 绘制 在 用 户 空间 坐标 系 中 ， 它 的 渐变 矢量 是 从 下 到 上 的 。 

© 渐变 的 前 40% 是 纯 绿 色 ， 然 后 逐渐 变 为 黄色 ， 再 到 红色 ，95% 之 后 是 纯 
红色 。 
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© 使 用 纯色 的 背景 填充 数据 区 域 ， 文 本 标记 偏 移 到 数据 区 域 的 外 部 
(overflow 设置 为 visible)。 通 过 把 标签 包含 在 柑 套 的 SVG 内 ， 这 样 可 
以 基于 viewBox 坐标 系 来 设 定 它们 的 位 置 ， 甚 至 可 以 打印 在 宽度 和 高 度 
区 域 之 外 。 


O 数据 线 是 一 个 <poLyLine> 元 素 。 它 的 表现 样式 (包括 渐变 的 描 边 ) 在 标 
记 中 指定 ， 但 它 没 有 points 属性 ， 所 以 直到 脚本 运行 时 它 才 会 绘制 。id 
属性 使 它 便于 在 脚本 中 访问 。 

O 脚本 内 ， 初 始 化 的 一 组 变量 用 于 控制 数据 和 坐标 系 之 间 的 比例 : n 是 
图 形 中 合适 的 数据 值 的 个 数 ，dx 是 它们 之 间 的 水 平 间 隔 (用 户 单位 )， 
maxY 是 垂直 范围 (0%~100%) 应 该 缩放 的 数值 。 

O data 数组 包含 原始 的 数据 (在 这 里 ， 包 括 一 个 索引 值 以 及 一 个 0 到 1 之 
间 的 随机 数 )。poiints 数组 包含 这 些 数据 点 缩放 后 的 坐标 ， 使 用 控制 变 
量 来 缩放 数据 以 及 转化 > 坐标 ， 所 以 最 终 0% 在 底部 而 100% 在 顶部 。 

O points 二 维 数 组 使 用 默认 的 tostring() 方法 转换 为 一 个 喜 号 分 隔 的 字符 

串 ， 并 设置 为 折线 的 points 属性 。 

有 效 地 使 用 userSpaceOnuse 渐变 来 传递 数据 的 关键 是 精确 地 匹配 用 户 空间 

坐标 系 与 数据 区 域 。 骨 套 的 坐标 系 人 允许 viewBox 完全 匹配 数据 区 域 ， 而 且 还 

为 区 域外 的 标签 留 有 空间 。 


ÝE IE LA WebKit/Blink 浏览 器 中 ， 要 想 把 渐变 正确 地 缩放 
到 数据 区 域 ，<linearGradient> 441 KEW SVG 的 子 元 
素 。 正 如 已 经 提 到 的 ， 这 些 浏 览 器 使 用 演 染 服务 的 父 级 坐标 
系 作 为 userSpaceOnUse 而 不 是 与 之 关联 的 绘制 的 形状 的 坐 






























































用 户 空间 这 染 的 描 边 的 视觉 效果 类 似 于 一 个 连续 的 怎 形 渐变 遮 罩 在 线条 上 ， 
仅仅 显示 线条 的 区 域 。 然 而 ， 就 像 我 们 在 第 11 章 中 讨论 的 图 像 填 充 的 文本 
那样 ， 渐 变 裁剪 为 线条 和 线条 使 用 渐变 演 染 之 间 在 结构 上 有 很 大 差异 。 如 
果 你 想 在 数据 图 表 中 添加 交互 效果 ， 你 往往 希望 线条 本 身 是 交互 的 对 象 ， 
而 不 是 大 部 分 都 不 可 见 的 秆 形 区 域 。 


这 种 效果 不 一 定 非 要 限制 在 实际 的 数据 图 形 内 ， 你 可 以 使 用 一 个 纹理 图 案 
或 图 片 作 为 穿 透 描 边 区 域 露出 的 内 容 。 






































13.4 有 图案 的 线条 


图 案 描 边 和 渐变 描 边 工作 方式 基本 一 致 。 但 由 于 图 案 在 垂直 和 水 平 上 严密 
地 重复 磁 贴 ， 当 描 边 方向 和 浑 染 服务 没有 对 齐 时 会 更 加 明显 。 


与 源 变 一 致 ， 建 议 使 用 userSpaceOnuse 的 方法 来 避免 objectBoundingBox 单 
位 带 来 的 一 些 问题 。 如 果 确 认 形 状 有 一 个 有 效 的 边界 盒 〈( 即 它 不 是 垂直 或 
水 平 的 直线 ) ， 你 仍然 可 以 使 用 边界 盒 图 案 ， 但 图 案 的 缩放 是 基于 填充 区 域 
的 而 非 描 边区 域 的 缩放 。 


il 13-6 使 用 了 第 10 章 和 第 11 章 中 各 种 各 样 的 图 案 来 给 一 些 基本 的 形状 描 
边 一 一 配 有 不 同 程度 的 效果 ， 如 图 13-7 所 示 。 


例 13-6 ”使 用 狐 变 来 给 折线 图 添加 信息 
<svg xmlns="http: //www.w3.org/2000/svg" 
width="4.3in" height="4.3in" viewBox="0 0 400 400"> 
<title>Patterned Strokes</title> 
<defs> 
<!-- pattern definitions clipped --> 
</defs> 
<g style="stroke-width: 40px; fill: lightSkyBlue;" > 
<rect x="20" y="20" width="360" height="360" 
stroke="url(#pinstripe) gray" /> 
<polygon points="200,30 370,200 200,370 30,200" 
stroke="url(#scales-pattern) green"/> 
<circle cx="200" cy="200" r="90" 
stroke="url(#gradient-pattern) peachPuff"/> © 
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</g> 
</svg> 


O 图 案 (以 及 组 成 它 的 渐变 ) 都 是 直接 从 例 10-5、 例 10-6 和 例 11-1 中 复 
制 过 来 的 ， 所 以 这 里 没有 重复 打印 。 


O 所 有 形状 在 淡 蓝 色 的 填充 之 上 都 有 一 个 粗 的 、40px 宽 的 描 边 。 
© 长 方形 使 用 例 10-6 中 的 pinstripe 图 案 。 
O BIEN <polygon> 使 用 的 是 例 10-5 中 的 鱼鳞 图 案 。 


O 圆 形 使 用 例 11-1 中 的 分 层 布局 。 与 其 他 形状 一 样 ， 它 被 赋予 了 一 个 备用 
的 颜色 ， 以 备 不 时 之 需 。 
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13-7; 使 用 各 种 各 样 图 案 进行 描 边 的 形状 
JE, HEE AY ff Fd SE ET be ARE A SARA. pinstripes 不 一 


























定 有 你 想 要 的 效果 : 坚 条 纹 会 跨 过 正方 形 水 平方 向 的 描 边 ， 但 在 垂直 方向 
上 沿 着 描 边 紧 直 向 下 。 分 层 的 描 边 创建 了 一 个 相当 不 寻常 的 效果 ， 新 变 都 
是 使 用 边界 盒 图 案 来 编写 的 ， 因 为 边界 盒 不 会 填充 整个 描 边 区 域 ， 它 们 在 
每 条 边 上 平 铺 ， 创 建 了 颜色 锐利 变换 的 效果 。 

与 渐变 一 样 ， 我 们 也 有 解决 这 些 问题 的 办 法 。 例 如 ， 一 些 条 纹 的 描 边 效 果 
可 以 使 用 虚线 描 边 来 创建 。 为 了 避免 在 使 用 对 象 边 界 盒 图 案 描 边 时 的 平 铺 ， 
你 可 以 设置 x、y、width 和 height 属性 来 定义 一 个 足以 包括 描 边 区 域 的 图 
案 磁 贴 ( 即 x 和 y 是 负 的 值 ，width 和 height 的 值 都 大 于 100%)。 所 有 这 一 
切 都 使 多 重 描 边 和 边界 盒 描 边 在 将 来 变 得 更 加 容易 。 
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动画 








SVG 颜色 、 渐 变 和 图 案 可 以 通称 为 绘画 ， 但 是 它 与 油画 和 水 彩 画 有 一 个 非 
常 重要 的 不 同 : SVG 绘画 可 以 移动 。 


Web 浏览 器 中 的 SVG 是 动态 的 。 我 们 可 以 给 它 添加 无 限 循 环 或 响应 用 户 交 
互 的 动画 。 

动画 使 SVG 绘制 属性 和 泻 染 服务 在 某 些 方面 变 得 更 加 复杂 。 本 章 总 结 了 一 
些 主要 的 问题 以 及 与 之 对 应 的 解决 办 法 。 起 初 我 们 回顾 了 SVG 添加 动画 的 
不 同方 式 ， 并 以 动态 填充 颜色 作为 示例 。 然 后 主要 讲 了 使 用 谊 染 服务 添加 
动画 的 两 种 情况 : 给 许多 绘制 元 素 添 加 同步 的 动画 ， 或 给 单个 元 素 添加 动 
画 而 不 影响 其 他 元 素 。 

截图 来 自动 画 示例 ， 但 更 直观 的 体验 需要 在 Web 浏览 器 中 运行 代码 。 

对 SVG 动画 完整 的 讨论 可 能 需要 几 本 书 才 能 讲 完 ， 所 以 本 章 没 有 试图 描 
述 所 有 的 可 选项 和 语法 。 相 反 ， 我 们 着 重 于 颜色 和 泻 染 服务 所 特有 的 方面 。 
如 果 你 还 不 熟悉 CSS, SMIL 以 及 JavaScript 动画 ， 你 可 能 需要 查阅 其 他 资 
料 才 能 完全 理解 代码 是 如 何 创建 最 终 效 果 的 。 


14.1 动画 选项 
给 SVG 图 形 添加 动画 的 方法 有 三 种 : 
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在 标记 内 包含 动画 元 素 (<animate>、<set>、<animateTransform> 以 及 
<animateMotion>) 来 修改 其 他 元 素 ; 

。 在 图 形 的 样式 中 添加 CSS 动画 或 过 渡 属 性 ， 

。 使 用 JavaScript 依次 操作 图 形 的 样式 或 属性 。 


这 三 种 方法 至 少 都 提供 了 创建 交互 动画 的 可 能 。 动 画 元 素 可 以 由 用 户 的 
click 或 mouseover 等 事件 来 触发 或 修改 起 始 和 终止 状态 。CSS 动画 和 过 渡 
可 以 通过 交互 的 伪 类 (:hover，:focus，:active) 来 触发 。JavaScript 当然 
可 以 用 于 各 种 用 户 交 互 和 程序 。 


使 用 哪 种 方式 来 给 SVG 添加 动画 很 大 程度 上 取决 于 你 准备 如 何 使 用 SVG. 
当 SVG 作为 图 片花 入 在 其 他 网 页 中 时 ， 无 论 是 通过 <img> 标签 、CSS 背景 
图 像 还 是 其 他 相似 的 属性 来 引入 ，JavaScript 都 不 会 运行 。 此 时 ，SVG 代码 
必须 包含 在 网 页 中 或 通过 有 交互 的 <object> RRA., JavaScript 也 有 可 能 
于 安全 或 性 能 原因 而 被 用 户 有 意 禁 

假如 所 有 的 样式 都 定义 在 SVG 文件 内 ， 声 明 式 的 方法 (使 用 标记 或 CSS 属 
性 定义 的 动画 ) 在 用 于 图 像 的 SVG 中 依然 可 以 运行 。 但 动画 不 可 交互 ， 
为 用 户 事件 无 法 传递 到 SVG 文档 中 。 


目前 浏览 器 对 声明 式 动画 方法 的 支持 程度 低 于 脚本 动画 ， 即 便 对 CSS 动画 
的 支持 程度 正在 增长 。 对 于 脚本 动画 ， 许 多 浏览 器 支持 上 的 限制 可 以 通过 
额外 的 代码 来 弥补 (在 性 能 上 会 做 一 些 妥协 )， 也 有 一 些 不 同 的 代码 库 使 得 
设计 高 效 动画 更 加 容易 。 

最 终 ， 当 谈 到 动态 Fill 和 stroke， 浑 染 内 容 的 类 型 会 影响 你 对 动画 的 选 
择 。 对 于 颜色 ， 我 们 可 以 直接 通过 样式 来 修改 元 素 上 的 样式 属性 来 添加 动 
画 。 但 对 于 演 染 服务 ， 我 们 只 能 通过 修改 图 案 、 渐 变 或 结 点 元 素 上 的 样式 
和 属性 来 添加 动画 。 


本 章 中 的 例子 将 提供 相同 效果 的 多 种 编码 方式 ， 并 突出 强调 每 种 方法 的 优 

点 和 局 限 性 一 一 包括 规范 上 的 局 限 和 浏览 器 支持 上 的 局 限 。 

对 于 动画 元 素 ， 以 下 因素 应 该 会 影响 你 的 决定 。 

。 有 限 的 浏览 器 支持 ， 目 前 会 降低 我 们 的 预期 。 

。 儿 平 能 够 给 任何 样式 属性 添加 动画 (虽然 也 有 浏览 器 支持 的 限制 )。 

。 交互 是 通过 DOM 事件 来 添加 ， 进 而 控制 动画 开始 还 是 停止 。 动 画 会 一 
直 运 行 到 完全 结束 或 被 其 他 事件 终止 ,最终 的 状态 也 可 以 是 “frozen”， 
但 如 果 动 画 重新 启动 ， 它 会 立即 恢复 。 

。 对 于 交互 ,正在 执行 动画 的 元 素 以 及 接收 用 户 输入 的 元 素 可 以 完全 独立 。 
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。 动画 可 以 链 在 一 起 执行 或 通过 一 个 动画 元 素 的 开始 或 结束 事件 触发 另 一 
个 元 素来 交错 执行 。 
多 个 动画 作用 在 同一 个 元 素 上 的 相同 属性 时 ， 可 能 会 一 起 添加 〈 对 于 大 
多 数 属性 )， 也 可 能 后 添加 的 动画 替换 前 者 。 

。 定时 动画 ( 非 交 互 ) 在 SVG 用 作 图 像 时 依然 可 以 运行 。 


对 于 CSS 动画 ， 需 要 考虑 以 下 因素 。 
浏览 器 支持 的 限制 有 望 改善 。 

。 仅 受 限于 动画 样式 属性 。 
交互 限制 于 伪 类 。 如 果 伪 类 不 再 适用 时 动画 将 会 中 断 ， 虽 然 过 渡 能 够 平 
滑 地 显示 效果 。 

。 对 于 交互 ,添加 伪 类 的 元 素 必 须 能 够 影响 使 用 CSS 后 代 选 择 器 或 兄弟 选 
择 器 的 目标 元 素 。 这 在 给 泻 染 服 务 添加 动画 时 ， 会 有 很 多 问题 。 

。 链 式 动画 会 有 很 多 困难 ， 无 论 是 一 个 keyframes 序列 包含 了 所 有 动画 阶 
段 ， 还 是 多 个 动画 通过 写 死 延迟 值 来 匹配 前 一 个 动画 持续 的 时 间 。 
多 个 动画 作用 在 同一 个 元 素 上 的 相同 属性 时 ， 后 添加 的 动画 会 替换 前 者 。 

。 定时 动画 ( 非 交 互 ) 在 SVG 用 作 图 像 时 依然 可 以 运行 。 

最 后 ， 对 于 JavaScript 动画 ， 相 关 的 因素 如 下 。 


。 最 佳 的 浏览 器 支持 ， 尤 其 是 可 以 给 旧 的 浏览 器 添加 polyfills 库 。 但 用 户 
有 可 能 会 禁用 JavaScript. 
能 够 给 任何 样式 、 属 性 、 文 本 内 容 、 其 至 DOM 结构 添加 动画 。 
交互 可 以 使 用 DOM 事件 传递 的 所 有 信息 ， 并 影响 文档 中 的 所 有 元 素 。 
多 级 和 链 式 动画 编码 困难 ， 但 JavaScript 类 库 可 以 简化 你 的 工作 (需要 
用 户 额外 下 载 )。 
。 在 作为 图 片 使 用 时 不 能 运行 ， 外 部 SVG 文件 必须 通过 <object> kA. 
选择 通常 并 不 唯一 。 特 别 是 ， 你 可 以 通过 JavaScript 来 触发 CSS 动画 ( 通 
过 改变 元 素 的 类 ) 或 动画 的 元 素 (通过 动画 元 素 的 beginElement() 方法 )。 
这 使 得 你 可 以 整合 脚本 动画 的 逻辑 性 、 可 控 性 和 声明 式 动画 的 简单 性 。 






















































































统一 的 Web 动画 模型 
Web 动画 规范 提供 了 网 页 中 所 有 定时 动画 的 总 体 描 述 。 其 统一 模型 描述 了 
SVG 动画 元 素 和 CSS 动画 特性 的 实现 。 它 还 定义 了 动态 创建 动画 效果 的 脚 
本 API。 这 些 效果 将 会 通过 指定 start 和 end 的 值 以 及 定时 参数 来 创建 ， 而 
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不 需要 设置 每 一 帧 的 中 间 值 。 这 将 结合 脚本 动画 的 可 控 性 和 声明 式 动画 语 
法 的 简单 性 及 性 能 优势 。 


在 编写 本 书 时 ， 大 多 数 浏览 器 都 正在 实现 Web 动画 API。 在 其 他 浏览 器 中 
有 一 些 JavaScript 的 polyfill 库 ， 它 们 会 把 API 指令 转换 为 一 帧 一 帧 的 动画 。 
但 polyfill 库 一 般 不 会 像 其 他 JavaScript 动画 库 一 样 对 性 能 进行 优化 。 


无 论 以 何 种 方式 给 SVG 添加 动画 ， 通 常 都 是 直接 简单 地 操作 填充 或 描 边 的 
颜色 值 。 大 多 数 其 他 表现 属性 也 同样 如 此 ， 包 括 fill-opacity 或 stroke- 


opacity. 


例 14-1 列 出 了 动画 元 素 的 基础 语法 ， 用 于 循环 使 用 不 同 的 颜色 来 填充 图 中 三 
颗 星 星 。 颜 色 循环 周期 是 3s， 但 会 无 限 重复 。 每 颗 星 星 使 用 的 颜色 序列 是 一 
举 的 ， 但 在 不 同 的 时 间 开 始 循环 。 图 14-1 显示 的 是 循环 过 程 中 的 一 个 瞬间 。 


例 14-1 使 用 动画 元 素 给 填充 色 添 加 动画 
<svg xmLns="http://www.w3.org/2000/svg" 
xmLns:XxLink="http://www.w3.org/1999/xLink" 
width="4in" height="2in" viewBox="0 0 200 100"> 
<title xml: lang="en">Simple SMIL Animation</title> 
<symbol id="star" viewBox="0 0 200 200"> 
<path d="M100,10 L150,140 20,50 180,50 50,140 Z" /> 
</symbol> 
<rect height="100%" width="100%" fill="#222"/> 
<g fill="gold"> 
<use xlink:href="#star" width="50" height="50" 
transform="translate(10,20) rotate(-10)"> 
<animate attributeName="fill" 
values="gold; LightYel Low; gold; tomato; gold" 
dur="3s" repeatDur="indefinite" /> 











> 











</use> 
<use Xlink:href="#star" width="40" height="40" 
transform="translate(140,10) rotate(20)"> 
<animate attributeName="fill" begin="-1s" 
values="gold; LightYel low; gold; tomato; gold" 
dur="3s" repeatDur="indefinite" /> 
</use> 
<use xlink:href="#star" width="35" height="35" 
transform="translate(80,60) rotate(-5)"> 
<animate attributeName="fill" begin="-2s" 
values="gold; LightYelLow; gold; tomato; gold" 
dur="3s" repeatDur="indefinite" /> 
</use> 
</g> 
</svg> 
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图 14-1: 颜色 变化 的 星星 的 动画 序列 中 的 一 帧 





色 根 据 它们 的 RGB 值 来 过 渡 。 过 渡 的 中 间 值 使 用 和 渐变 相同 的 规则 来 计 
。 唯 一 的 不 同 是 动画 的 过 渡 是 时 间 上 的 ， 而 非 空 间 上 的 。 


a 


颜色 动画 会 受到 color-interpolation 属性 的 影响 。 但 正如 第 
3 章 中 提 到 的 ， 该 属性 在 Web 浏览 器 中 的 支持 程度 并 不 友好 。 

















SVG 动画 元 素 使 用 的 是 同步 多 媒体 继承 语言 (SMIL) 的 语法 ， 它 的 目的 是 
为 了 整合 音频 、 视 频 以 及 XHTML 内 容 。 你 应 该 可 以 想象 到 ， 语 法 中 包括 
多 种 同步 多 个 动画 的 选项 ， 控 制 它 们 同时 执行 还 是 一 个 接 一 个 执行 。 因 此 ， 
它 可 以 用 于 排列 复杂 的 动画 序列 。 但 这 些 复杂 的 动画 序列 不 能 很 好 地 和 交 
互 特性 结合 在 一 起 。SMIL 动画 的 声明 格式 中 没有 办 法 来 响应 当前 动画 状态 
下 的 用 户 事 件 。 
动画 元 素 语 法 的 另 一 个 限制 是 它 很 元 长 。 每 个 要 添加 动画 的 元 素 都 需要 一 
个 与 之 对 应 的 动画 元 素 。 无 法 给 多 个 动画 相同 的 图 形 组 件 快速 应 用 变化 ， 
比如 例 14-1 中 的 三 颗 星 星 。 


广泛 使 用 SVG 动画 元 素 最 显著 的 限制 是 浏览 器 的 支持 程度 较 差 。 
TE 不 支持 动画 元 素 。 编 写本 书 时 ，Chromium 团队 宣布 将 弃 


用 该 特性 。 短 期 来 看 ， 这 意味 着 会 在 使 用 动画 语法 的 网 页 的 
控制 台 报告 警告 信息 。 长 期 来 看 ， 该 动画 可 能 会 无 法 运行 。 
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对 于 简单 地 给 表现 属性 添加 动画 ，CSS 动画 提供 了 更 加 简洁 、 灵 活 的 语法 。 
例 14-2 中 使 用 CSS 动画 创建 了 完全 相同 的 星星 内 烁 的 效果 。 一 个 class 是 
用 于 给 三 颗 星 星 应 用 相同 的 动画 序列 ，nth-of-type 选择 器 用 于 改变 单个 星 
星 的 动画 开始 时 间 。 


Gil 14-2 通过 CSS 关键 帧 给 填充 色 添加 动画 
<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="4in" height="2in" viewBox="0 © 200 100"> 
<title xml:lang="en">Simple CSS Animation</title> 
<style type="text/css"> 
.star { 
Fill: gold; 
animation: twinkle 3s infinite; 





} 
«star: nth-of-type(3n+2){ 
animation-delay: -1s; 
} 
.star:nth-of-type(3n+3){ 
animation-delay: -2s; 
} 
@keyframes twinkle { 
25% {fill: LightYellow; } 
50% {fill: gold; } 
75% {fill: tomato;} 
} 
</style> 
<symbol id="star" viewBox="0 0 200 200"> 
<path d="M100,10 L150,140 20,50 180,50 50,140 Z" /> 
</symbol> 
<rect height="100%" width="100%" fill="#222"/> 
<use xlink:href="#star" width="50" height="50" class="star" 
transform="translate(10,20) rotate(-10)"/> 
<use xlink:href="#star" width="40" height="40" class="star" 
transform="translate(140,10) rotate(20)"/> 
<use xLink:href="#star" width="35" height="35" class="star" 
transform="translate(80,60) rotate(-5)"/> 


</svg> 
SVG 中 CSS 动画 的 主要 限制 是 只 可 以 操作 表现 属性 。 几 何 属性 (只 能 在 
XML 中 指定 ) 不 能 通过 CSS 规则 添加 动画 。SVG 2 规范 中 重新 把 一 些 布局 


属性 定义 为 表现 属性 ， 但 许多 SVG 特性 依然 无 法 通过 CSS 动画 访问 。 
CSS 动画 也 不 适用 于 长 序列 的 连续 动画 ， 且 只 能 响应 有 限 的 一 组 用 户 行为 。 








CSS 动画 在 一 些 还 在 使 用 中 的 旧版 本 的 浏览 器 中 不 支持 。 但 
在 除 最 新 版 外 的 所 有 WebKit 浏览 器 中 ，CSS 动画 需要 添加 
-webkit- 前 级 ， 这 意味 着 你 将 需要 复制 动画 属性 和 关键 帧 规 
|, IE 不 支持 在 SVG 元 素 上 使 用 CSS 动画 ， 但 在 Edge i 
览 器 中 可 能 加 以 支持 。 








= 


要 想 让 动画 得 到 更 普遍 的 支持 ， 你 可 以 使 用 JavaScript 来 操作 DOM. Xf 
于 简单 的 线性 动画 ， 你 可 以 直接 循环 所 有 的 中 间 值 ， 并 使 用 request 
AnimationFrame 方法 来 在 浏览 器 更 新 显示 时 更 新 图 形 。 对 于 更 复杂 的 多 级 
动画 (例如 交错 的 颜色 变化 )， 你 可 能 需要 使 用 专门 的 JavaScript 动画 库 ， 
它 将 会 把 你 声明 的 语句 (哪些 属性 添加 动画 ， 改 变 多 少 ) 进行 优化 并 一 帧 
一 帧 地 调整 。 


14.2 ”坐标 动画 

填充 和 描 边 的 颜色 动画 是 比较 直接 的 。 无 论 是 动画 元 素 还 是 CSS 动画 ， 浏 
览 器 都 会 在 你 指定 的 颜色 之 间 过 渡 。 但 对 于 浑 染 服务 是 怎样 的 呢 ? 这 会 变 
得 更 加 复杂 。fill 和 stroke 属性 实际 使 用 的 值 将 会 是 一 个 URL。 浏 览 器 无 
法 生成 两 个 URL 之 间 的 中 间 值 。 











规范 中 允许 在 动画 过 程 中 修改 URL 的 值 。 但 浏览 器 的 支持 
程度 较 差 ， 编 写本 书 时 ， 仅 限于 Firefox 的 SMIL 动画 。 











但 泻 染 服务 元 素 本 身 是 可 以 添加 动画 的 。 渐 变 结 点 的 颜色 和 不 透明 度 的 值 
可 以 通过 CSS 添加 动画 ， 也 可 以 对 图 案 内 容 的 表现 样式 添加 动画 。 在 将 来 ， 
渐变 和 图 案 的 转换 也 会 受到 CSS 动画 的 transform 属性 影响 。 这 些 属性 以 
及 更 多 的 结构 属性 可 以 通过 SVG 标记 或 JavaScript 来 添加 动画 。 

给 泻 染 服务 添加 动画 与 给 fill 和 stroke 泻 染 属性 添加 动画 有 一 个 很 重要 的 
不 同 。 动 画 会 自动 影响 所 有 使 用 该 泻 染 服务 的 元 素 ， 且 同时 改变 它们 。 

这 个 特性 是 否 真 的 需要 取决 于 图 形 的 具体 细 市 。14.3 市 将 探讨 当 你 不 希望 
所 有 元 素 都 同时 改变 时 的 代替 方法 。 特 别 之 处 是 该 部 分 将 重点 关注 使 用 动 
画 来 突出 用 户 正在 进行 交互 的 特定 元 素 。 相 比 之 下 ， 对 于 许多 声明 式 动 画 
来 说 ， 同 步 动画 是 可 接受 的 ， 甚 至 是 我 们 所 期 望 的 。 
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例 14-3 中 使 用 同步 动画 来 改编 星星 闪烁 的 动画 。 现 在 ， 我 们 不 是 给 星星 上 
的 填充 颜色 添加 动画 ， 而 是 把 动画 应 用 在 一 系列 <stop> 元 素 的 stop-color 




















值 。 动 画 代码 看 起 来 非常 相似 。 图 





14-2 显示 了 渐变 填充 的 星星 的 一 个 屏幕 


截图 ， 你 需要 自己 运行 代码 来 看 到 完整 的 闪烁 效果 。 


例 14-3 使 用 CSS 给 渐变 结 点 颜色 添加 动画 
<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 





width="4in" height="2in" 


viewBox="0 0 200 100"> 


<title xml: lang="en">CSS-Animated Gradient</title> 


<style type="text/css"> 
.star { 
fill: url(#shine); 
} 
#shine stop { 
stop-color: gold; 


animation: twinkle 3s infinite; 


} 


#shine stop:nth-of-type(3n+2){ 
animation-delay: -1s; 


} 


#shine stop:nth-of-type(3n+3){ 
animation-delay: -2s; 


} 
@keyframes twinkle { 


25% {stop-color: LightYellow; } 
50% {stop-color: gold; } 
75% {stop-color: tomato; } 


} 
</style> 


<symbol id="star" viewBox="0 0 200 200"> 


<path d="M100,10 L150, 


</symbol> 


<linearGradient id="shine" 


<stop offset="0" /> 


140 20,50 180,50 50,140 Z" /> 


gradientTransform="rotate(20)"> 


<stop offset="0.25" /> 


<stop offset="0.5" /> 


<stop offset="0.75" /> 


<stop offset="1" /> 
</linearGradient> 


<rect height="100%" width="100%" fill="#222"/> 

<use xlink:href="#star" width="50" height="50" class="star" 
transform="translate(10,20) rotate(-10)"/> 

<use xlink:href="#star" width="40" height="40" class="star" 
transform="translate(140,10) rotate(20)"/> 

<use xLink:href="#star" width="35" height="35" class="star" 
transform="translate(80,60) rotate(-5)"/> 


</svg> 




















图 14-2; 使 用 震荡 渐变 的 星星 的 动画 序列 的 一 帧 


往复 的 颜色 结 点 也 可 以 使 用 SMIL 式 的 动画 元 素来 创建 ， 通 过 在 每 个 
元 素 内 添加 一 个 <animate> 元 素 。 但 在 一 些 CSS 动画 无 法 做 到 的 习 
上 ， 动 画 元 素 就 显得 更 加 有 用 : 比如 修改 几何 属性 。 


例 14-4 中 使 用 两 个 动画 元 素来 修改 <LinearGradient> 元 素 的 x1 和 y2 属性 。 
它 的 静态 屏幕 截图 与 图 14-2 plies 但 动态 效果 会 有 很 大 不 同 : 每 个 星 
星 不 只 是 在 恰当 的 位 置办 烁 ， 还 会 像 柔 和 的 波浪 一 样 延 伸 和 移动 。 


例 14-4 使 用 动画 元 素 给 渐变 矢量 添加 动画 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xLink" 
width="4in" height="2in" viewBox="0 0 200 100"> 
<title xml: lang="en">SMIL-Animated Gradient</title> 
<style type="text/css"> 
.Star { 
fill: url(#shine); 














a 

































































} 
</style> 
<symbol id="star" viewBox="0 0 200 200"> 
<path d="M100,10 L150,140 20,50 180,50 50,140 Z" /> 
</symbol> 
<linearGradient id="shine" spreadMethod="repeat" 
gradientTransform="rotate(20)" > 
<animate attributeName="y2" values="1;1.53;1;0.75;1" 
dur="2s" repeatDur="indefinite" /> 
<animate attributeName="x1" values="0;0.5;0" 
dur="3s" repeatDur="indefinite" /> 
<stop offset="0" stop-color="gold" /> 
<stop offset="0.25" stop-color="lightYellow" /> 





<stop offset="0.5" stop-color="gold" /> 
<stop offset="0.75" stop-color="tomato" /> 
<stop offset="1" stop-color="gold" /> 
</linearGradient> 
<rect height="100%" width="100%" fill="#222"/> 
<use xLink:href="#star" width="50" height="50" class="star" 
transform="translate(10,20) rotate(-10)"/> 
<use xLink:href="#star" width="40" height="40" class="star" 
transform="translate(140,10) rotate(20)"/> 
<use xLink:href="#star" width="35" height="35" class="star" 
transform="translate(80,60) rotate(-5)"/> 
</svg> 


当 渐 变 使 用 SMIL 添加 动画 时 ，Firefox 和 WebKit 浏览 器 日 
前 都 不 会 更 新 绘制 的 图 形 (只 能 在 Blink 浏览 器 中 工作 )。 


























使 用 JavaScript (而 不 用 SMIL) 修改 渐变 属性 来 创建 这 种 效果 可 以 获得 更 
好 的 训 览 器 支持 。 但 这 里 三 颗 星星 的 动画 将 完全 同步 ， 因 为 他 们 都 使 用 相 
同 的 渐变 

对 于 某 些 图 形 ， 也 许 你 可 以 通过 使 用 每 个 形状 内 略 不 相同 的 重复 
userSpaceOnUse 图 形 来 扰乱 这 种 重复 效果 。 但 对 于 这 三 颗 星 星 ， 这 种 方式 
没有 任何 效果 : 每 颗 星 星相 对 于 自己 的 <symbol> 坐标 系 位 置 相同 ， 所 以 每 
颗 星 星 绘制 在 用 户 空间 渐变 内 相同 的 点 上 。 





























聚焦 未 来 
渐变 之 间 的 过 渡 
依据 CSS Image Values and Replaced Content Module Level 3 的 最 新 草案 ， 在 
一 些 浏览 器 中 可 以 给 CSS 渐变 函数 添加 动画 (通过 CSS 动画 )。 要 想 在 两 个 渐 
变 之 间 过 渡 ， 它 们 的 类 型 必须 相同 (例如 ， 都 是 repeating-linear-gradient) ， 
且 结 点 的 数量 也 必须 相同 。 之 后 单独 在 结 点 偏 移 和 颜色 上 进行 过 渡 。 


不 支持 渐变 插值 的 浏览 器 将 会 忽略 所 有 在 @keyframes 中 设 
置 的 值 ， 且 不 进行 过 滤 并 立即 应 用 其 他 的 变化 。 


CSS 过 渡 规 范 中 有 提案 建议 通过 URL 引用 SVG 渐变 可 以 以 同样 的 方式 过 
渡 。 换 和 话说， 如 果 两 个 渐变 类 型 相同 且 结 点 的 个 数 也 相同 ， 当 通过 CSS 
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动画 或 过 渡 切 换 泻 染 服 务 时 ， 浏 览 器 将 会 生成 所 有 的 中 间 值 。 ne 
时 ， 还 没有 任何 浏览 器 实现 该 功能 ， 且 对 把 它 加 入 最 终 规 范 存在 反对 意 
Level 4 规范 中 引入 了 一 个 替代 的 过 沪 模 式 cross-fading， 它 eve 
片 溶解 到 另 一 张 图 片 内 ， 这 更 方便 应 用 在 SVG 泻 染 服务 的 内 容 中 。 


14.3 ”交互 动画 


动画 在 现代 站 点 中 最 重要 的 用 途 之 一 是 提供 用 户 反馈 和 连续 性 。 在 用 户 进 
行 交 互 时 ， 内 容 应 该 明显 变化 ， 但 变化 应 该 平滑 过 渡 ， 这 样 用 户 才 可 以 直 
观 地 理解 新 旧 状 态 的 关系 。 


如 果 使 用 动画 来 表示 用 户 和 特定 元 素 之 间 的 交互 ， 你 显然 不 能 让 网 页 上 所 
有 相似 的 元 素 同时 触发 相同 的 动画 。 一 种 解决 方式 是 专门 创建 一 个 演 染 服 
务 元 素 (或 多 个 元 素 ) 来 应 用 动画 效果 ， 且 只 在 需要 的 时 候 使 用 它 。 同 时 
通过 其 他 这 染 服务 绘制 元 素 的 静态 状态 。 

当 用 户 和 一 个 元 素 (图 形 图 标 ) 交互 时 ， 给 另 一 个 元 素 GAAS) 添加 
动画 难以 通过 CSS 动画 实现 。 有 时 可 以 通过 兄弟 选择 器 和 子 选 择 器 来 完成 ， 
但 你 必须 把 标记 重新 排列 为 一 个 相当 凌乱 的 结构 。 因 此 ， 我 们 首先 使 用 基 
于 SMIL 的 方法 来 描述 要 实现 什么 ， 然 后 展示 如 何 使 用 JavaScript (工作 量 
更 大 ,但 更 加 灵活 且 浏 览 器 支持 较 好 ) 创建 相同 的 效果 。 


SMIL 动画 方法 利用 定时 属性 来 同步 多 个 动画 。 使 用 <set> 元 素来 把 共享 

的 、 静 态 的 新 变 谊 染 服 务 切换 到 有 动画 的 这 染 服 务 ， 然 后 使 用 <animate> 元 

素来 实现 效果 。 最 后 ， 另 一 个 <set> 元 素 把 图 形 切换 到 最 终 状 态 ， 即 再 次 

变 为 共享 的 泻 染 服务 。 
Blink 和 WebKit 浏览 器 不 会 正确 地 给 应 用 演 染 服务 的 URL 
添加 动画 ， 即 使 使 用 <set> 元 素 也 不 行 ， 填 充值 将 会 被 透明 
(WebKit) 或 纯 黑 色 (Blink) 替换 。 由 于 Chromium Ji A it 
划 不 推荐 使 用 SMIL， 因 此 预计 这 不 会 被 修复 。 所 以 该 例子 
只 能 在 Firefox 中 运行 。 





























































































































例 14-5 中 使 用 这 种 方法 实现 了 星星 图 标 上 的 点 击 效 果 ， 这 可 能 会 用 在 喜欢 
或 书签 元 素 上 。 它 使 用 我 们 之 前 在 第 8 章 星 级 图 标示 例 中 看 到 的 银色 和 人 金 
色 线 性 渐变 ， 以 及 一 个 额外 的 径 向 渐变 来 作为 过 渡 效 果 。 
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星星 刚 开 始 使 用 银 - RA Re. i, TER A EE Za, — 
个 金色 的 填充 从 元 素 的 中 心 辐射 出 来 。 动 画 效果 设计 所 有 三 个 渐变 ， 在 一 
个 <pattern> 元 素 内 布局 。 除 了 给 径 癌 渐变 的 半径 添加 动画 外 ， 图 层 的 不 透 
明度 也 在 平 请 地 过 渡 。 


图 14-3 显示 了 一 个 平面 截图 ， 其 中 一 个 图 标 已 经 是 最 终 的 金 色 状 态 , 一 
是 初始 的 银色 状态 ， 男 一 个 刚刚 被 点 击 且 辐 射 动 画 只 进行 了 一 部 分 。 










































































图 14-3: 一 个 交互 动画 网 页 的 截图 ， 最 后 一 个 图 标 刚 被 选中 不 久 


例 14-5 通过 动画 元 素 给 单个 元 素 添 加 响应 用 户 交 互 的 动画 
HTML 标记 : 








<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Interactive Animated Gradient with SMIL</title> 
<style type='text/css'> 
/* styles must be in the same document */ 
</style> 
</head> 
<body> 
<svg class="defs-only" 
aria-hidden="true" focusable="false" width="0" height="0" > 
<linearGradient id="silver-shine" spreadMethod="repeat" 
gradientTransform="rotate(20)" > 
<stop offset="0" stop-color="gray" /> 























<stop offset="0.35" stop-color="silver" /> 
<stop offset="1" stop-color="gray" /> 
</linearGradient> 
<linearGradient id="gold-shine" spreadMethod="repeat" 
gradientTransform="rotate(20)" > 
<stop offset="0" stop-color="gold" /> 
<stop offset="0.35" stop-color="lightYellow" /> 
<stop offset="1" stop-color="gold" /> 
</linearGradient> 
<radialGradient id="gold-ripple" r="0.2"> (1) 
<animate id="ripple" 
attributeName="r" from="0.1" to="1" 
dur="0.7s" fill="freeze" 
begin="reaction.begin + 0.1s" /> 
<stop offset="0" stop-color="gold" /> 
<stop offset="0.5" stop-color="LightYellow" /> 
<stop offset="0.75" stop-color="silver" /> 
<stop offset="1" stop-color="gray" /> 
</radialGradient> 
<pattern id="turn-gold" width="1" height="1" 
patternContentUnits="objectBoundingBox"> 
<rect fill="url(#gold-shine)" width="1" height="1" /> 
<rect fill="url(#silver-shine)" width="1" height="1" > 
<set attributeName="opacity" to="0" 
begin="reaction.begin + 0.5s" /> © 
</rect> 
<rect fill="url(#gold-ripple)" width="1" height="1" > 
<animate id="reaction" 
attributeName="opacity" 
values="0;1;1;0" 
keyTimes="0;0.2;0.8;1" 
dur="1s" 
begin="switch1. begin; 
switch2.begin; switch3.begin" /> 
</rect> 
</pattern> 


<symbol id="star" viewBox="0 0 200 200"> 
<path d="M100,10 L150,140 20,50 180,50 50,140 Z" /> 


</symbol> 
</svg> 
<hi>Pick your favorites:</h1i> 
<div> 
<figure id="opti" role="checkbox" tabindex="0"> @ 


<figcaption>Option 1</figcaption> 
<svg><use Class="star" xlink:href="#star"> 
<set id="switch1" 
attributeName="filLl" to="url(#turn-gold)" 
dur="1s" begin="opt1.click; opt1.activate"/> 
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<set attributeName="fill" to="url(#gold-shine)" 


dur="indefinite" begin="switch1.end" /> 


</use></svg> 
</figure> 


<figure id="opt2" role="checkbox" tabindex="0"> 


<figcaption>Option 2</figcaption> 


<svg><use Class="star" xlink:href="#star"> 


<set id="switch2" 


attributeName="filLl" to="url(#turn-gold)" 


© 


dur="1s" begin="opt2.click; opt2.activate"/> 
<set attributeName="fill" to="url(#gold-shine)" 
dur="indefinite" begin="switch2.end" /> 


</use></svg> 
</figure> 


<figure id="opt3" role="checkbox" tabindex="0"> 


<figcaption>Option 3</figcaption> 


<svg><use Class="star" xlink:href="#star"> 


<set id="switch3" 


attributeName="filL" to="url(#turn-gold)" 


© 


dur="1s" begin="opt3.click; opt3.activate"/> 
<set attributeName="fill" to="url(#gold-shine)" 
dur="indefinite" begin="switch3.end" /> 


</use></svg> 
</figure> 
</div> 
<script> 


/* do something based on the selected options */ 


</script> 
</body> 
</html> 


O 前 两 个 是 普通 的 线性 渐变 。 但 新 的 径 问 渐变 包含 一 个 <animate> 元 素来 
操作 它 的 r 属性 。 该 动画 在 id 为 reaction 的 动画 开始 执行 十 分 之 一 秒 


后 执行 。 


O <pattern> 元 素 包 含 了 所 有 需要 添加 过 渡 动 画 的 层 ， 作 为 单个 磁 贴 来 完 


全 填充 形状 边界 盒 。 





O 图 案 内 还 嵌 套 了 两 个 动画 元 素 : <set> THIELE Pi 








i 的 层 从 银色 切换 





到 金色 ，<animate> 元 素 对 径 向 渐变 的 不 透明 度 先 增 后 减 。 后 一 个 动画 
有 一 个 reaction 的 ID 值 ， 用 于 触发 其 他 两 个 过 流动 画 。reaction 动画 


本 身 在 三 个 切换 动画 中 任 一 个 开始 的 时 候 启 动 。 


O 在 主要 的 网 页 标记 中 ， 包 于 SVG 动画 的 <figure> 元 素 等 价 于 复 选 框 ， 
所 以 给 它 添加 了 ARIA 的 role="checkbox" 标识 。 每 个 SVG 包含 一 个 











<use> 元 素 ， 和 内 联 图 标 一 样 。 但 每 个 <use> 元 素 内 还 包含 两 个 动画 元 素 。 














动画 





| 211 


© switchi 动画 是 一 个 响应 复 选 框 <figure> 上 点 击 或 激活 事件 的 <set> 元 
素 ， 它 会 将 相关 图 标 从 银色 渐变 切换 到 过 渡 图 案 ， 然 后 开始 执行 动画 。 
第 二 个 <set> 元 素 在 动画 完成 后 再 次 把 填充 切换 为 最 终 的 金色 状态 。 

O 其 他 的 图 标 使 用 相同 的 动画 结构 ， 但 是 ID 都 唯一 。 

CSS 样式 : 


html { 
background-color: #222; 
color: lightSkyBlue; 





svg.defs-only { 
display: block; 
position: absolute; 
height: 0; width: 0; 
overflow: hidden; 


} 


figure[role="checkbox"] { 
display: inline-block; 
max-width: 33%; 
min-width: 5em; 
padding: 0; margin: 0; 
font-size: larger; (1) 
} 
figcaption { 
display: block; 
text-align: center; 
} 
figure[role="checkbox"] > svg { 
display: block; 
margin: auto; 
width: 4em; 
height: 4em; 


} 
.star { 

fill: url(#silver-shine); 

cursor: pointer; (2) 
} 


O 使 用 role 属性 值 为 checkbox 来 控制 布局 ， 而 没有 用 CSS 类 选择 器 。 


O CSS 中 同样 设置 星星 图 标的 默认 填充 值 为 银灰 色 渐 变 。 将 鼠标 指针 设 为 
pointer 将 使 鼠标 用 户 知道 该 内 容 是 可 交互 的 。 


除了 浏览 器 支持 程度 低 以 外 ， 该 方法 还 有 其 他 局 限 。 











。 如 果 用 户 在 1 秒 内 选择 了 两 个 不 同 的 图 标 ， 第 一 个 动画 将 会 被 重 置 为 与 
第 二 个 动画 同步 。 
驱动 主要 reaction 动画 的 动画 元 素 必 须 在 begin 属性 内 添加 所 有 可 以 触 
发 它 的 事件 。 例 14-5 中 通过 响应 <set> 动画 来 简化 它 ， 而 不 是 使 用 原始 
的 用 户 事件 。 但 如 果 要 向 网 页 内 添加 新 的 交互 图 标 ， 仍 然 需要 在 begin 
属性 内 添加 新 的 值 。 
在 图 标 再 一 次 被 点 击 的 时 候 ， 选 择 状 态 不 会 切换 ， 且 动画 也 不 会 回 退 。 
后 续 的 点 击 会 重新 启动 相同 的 动画 序列 ， 但 不 会 取消 已 经 选择 的 条 目 。 
如 果 想 实现 一 个 反 向 的 动画 ， 需 要 单独 添加 一 个 透明 的 SVG 元 素 (使 用 
另 一 个 <set> 动画 )， 当 图 标 被 选中 时 显示 在 图 标的 最 上 层 并 捕获 所 有 的 
用 户 事件 (使 用 pointer-events:all)。 该 元 素 将 用 于 触发 取消 选择 *。 你 
还 需要 一 个 <animate> 和 <set> 元 素来 控制 反 向 的 动画 序列 。 
虽然 图 标 已 经 赋予 了 ARIA 的 复 选 框 角色 ， 以 便 屏幕 阅读 器 用 户 可 以 激 
活 它 们 ， 但 元 素 的 选中 状态 在 图 标 被 选中 时 不 会 更 新 。 这 需要 在 脚本 中 
实现 ，SMIL 动画 在 任何 浏览 器 中 都 不 可 以 修改 HTML 元 素 上 的 属性 。 

这 些 问 题 在 例 14-6 中 得 到 了 解决 : 使 用 JavaScript 来 控制 有 复 选 框 逻 辑 的 

动画 。 它 还 添加 了 对 键盘 的 支持 并 增加 了 一 个 新 功能 : 当 图 标 通 过 鼠标 

click 或 tap 激活 时 ， 径 向 渐变 从 触摸 点 开始 向 外 扩展 。 这 种 对 用 户 事件 微 

妙 的 反应 是 许多 交互 设计 指南 中 所 推荐 的 ， 包 括 谷 歌 的 Material Design 设 

计 指 南 。 

Gil 14-6 通过 JavaScript 给 单个 元 素 添 加 响应 用 户 交 互 的 动画 

HTML 标记 : 


































































































<!DOCTYPE htmL> 
<html Lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Interactive Animated Gradient with JavaScript</title> 
<style type='text/css'> 
/* styles unchanged */ (1) 
</style> 
</head> 
<body> 








TE 2: 如 果 你 对 创建 切换 的 SMIL 动画 感 兴趣 (对 于 其 他 类 型 的 动画 ， 比 如 形状 变形 ， 浏 
览 器 的 支持 程度 更 好 )，Michael J. Harris 写 了 一 个 很 好 的 教程 (http://codepen.io/ 
mikemjharris/blog/svg-toggling ) 。 
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<svg class="defs-only" 
aria-hidden="true" focusable="false" width="0" height="0" > 
<linearGradient id="silver-shine" spreadMethod="repeat" 
gradientTransform="rotate(20)" > 
<stop offset="0" stop-color="gray" /> 
<stop offset="0.25" stop-color="silver" /> 
<stop offset="1" stop-color="gray" /> 
</linearGradient> 
<LinearGradient id="gold-shine" spreadMethod="repeat" 
gradientTransform="rotate(20)" > 
<stop offset="0" stop-color="gold" /> 
<stop offset="0.25" stop-color="LightYellow" /> 
<stop offset="1" stop-color="gold" /> 
</linearGradient> 
<radialGradient id="gold-ripple" r="0.2"> 
<stop offset="0" stop-color="gold" /> 
<stop offset="0.5" stop-color="LightYellow" /> 
<stop offset="0.75" stop-color="silver" /> 
<stop offset="1" stop-color="gray" /> 


</radialGradient> 
<pattern id="turn-gold" width="1" height="1" 
patternContentUnits="objectBoundingBox"> (2) 


<rect class="transition" 
fill="url(#gold-ripple)" width="1" height="1" /> 
<rect class="on" 
fill="url(#gold-shine)" width="1" height="1" /> 
<rect class="off" 
fill="url(#silver-shine)" width="1" height="1" /> 
</pattern> 
<symbol id="star" viewBox="0 0 200 200"> 
<path d="M100,10 L150,140 20,50 180,50 50,140 Z" /> 
</symbol> 
</svg> 
<hi>Pick your favorite:</hi> 
<div> 
<figure id="opt1" role="checkbox"> 
<figcaption>Option 1</figcaption> 
<svg><use xLink:href="#star" /></svg> © 
</figure> 
<figure id="opt2" role="checkbox"> 
<figcaption>Option 2</figcaption> 
<svg><use Xlink:href="#star"/></svg> 
</figure> 
<figure id="opt3" role="checkbox"> 
<figcaption>Option 3</figcaption> 
<svg><use XLink:href="#star"/></svg> 
</figure> 
</div> 
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<script> 
/* Script included at end of file 
or as an async-loaded external resource */ 
</script> 
</body> 
</html> 


O 基础 的 样式 与 例 14-5 中 完全 一 样 。 


© 渐变 和 图 案 基 本 一 样 。 删 除了 动画 元 素 ， 且 图 案 层 级 重新 排列 以 使 动画 
代码 更 加 简单 。 


© 除 删除 了 动画 元 素 外 ， 网 页 标记 也 相同 。 

















JavaScript: 
(function(){ 
var toggles = document.querySelectorALl('"[role='checkbox']"); 
var selectGraphic = ".star"; 


var svg = document.querySelector("svg"); 
//arbitrary <svg> element so that 
//we can access SVG dom methods 
var paint = { 
off: "url(#silver-shine)", 
animate: "url(#turn-gold)", 
on: "url(#gold-shine)" 


F 0 
var animating = false, 
animatingOption, 
nextFrame; 
for (var i=0, n=toggles.length; i<n; i++){ (2) 


toggles[i].setAttribute("aria-checked", false); 
toggles[i].querySelector(selectGraphic).style. fill 
= paint.off; 
toggles[i].addEventListener("click", toggleState) ; 
toggles[i].addEventListener("keyup", checkKey) ; 


//tell Internet Explorer not to focus <svg> 
toggles[i].querySelector("svg") 
.setAttribute("focusable", false); 
} 
function checkKey(e) { © 
//check for spacebar or Enter key, 
//using both the new standard syntax 
//and the old keycode syntax 
if ( (e.key == " ")||(e.key == "Enter") || 
(e.keyCode == 32 )||(e.keyCode == 13) ) 
toggleState.apply(this, arguments); 





a 
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} 
function toggleState(e){ (4) 
var currentlyChecked = 
(this.getAttribute("aria-checked") 
=== true.toString() ); 


//update the actual state 
this.setAttribute("aria-checked", !currentlyChecked) ; 
/* maybe do something based on the selected options */ 


if (currentlyChecked) { 
//animate turning off quickly 


animateStar(this, e, 300, true); © 
} 
else { 

//animate turning on, more slowly 

animateStar(this, e, 1000); 
} 


} 


function animateStar(option, event, dur, reverse) { 
if ((!dur)||isNaN(dur)) return; 
//must have a valid animation duration 


/* animation parameters */ 

var effects = [ O 
{selector:"#gold-ripple", attr:"r", 
fron:0.1,. toit,.t1:6.1,. £2:0.8}, 
{selector:"#turn-gold .on", attr:"opacity", 
from:0, tord, €1:0,8;. t221}, 
{selector:"#turn-gold .off", attr:"opacity", 
from:1, to:0, t1:0, t2:0.2} 
J; 

var selectTracker = "#gold-ripple"; 

var star = option.querySelector(selectGraphic) ; 

var startTime = 0; 


if (reverse) { 
//swap the order of each effect 
effects. forEach(function(effect){ 
var swap = effect.from; 
effect.from = effect.to; 
effect.to = swap; 


swap = effect.t1; 
effect.t1 = 1 - effect.t2; 
effect.t2 = 1 - swap; 

}); 
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} 


if (animating){ o 


} 


//abort current animation 
cancelAnimationFrame(nextFrame); 


if (animatingOption != option) { 

//tidy up the current animation by setting 

//it to the correct end state 

animatingOption.querySelector(selectGraphic) 
.style.fill = 
(animatingOption.getAttribute("aria-checked") 

=== true.toString() ) ? 

paint.on : paint.off; 


} 
else { 

//set the new animation to start 

//from the current state 

effects. forEach(function(effect){ 

effect.from = parseFloat( 
document. querySelector(effect.selector) 
.getAttribute(effect.attr) ); 
ps 

} 


var track = document.querySelector(selectTracker); 
if (event instanceof MouseEvent) { O 


//recenter the radial gradient 

//to track the mouse event 

//by converting mouse coordinates first to 

//userSpace coordinates for the star, 

//and then to bounding box coordinates 

var bbox = star.getBBox(), 
CTM = star.getScreenCTM().inverse(), 
p = svg.createSVGPoint(), 
p2, newCx, newCy; 

p.x = event.clientX; //NOT screenX and screenY 

p.y = event.clientY; 

p2 = p.matrixTransform(CTM); 

newCx = (p2.x - bbox.x)/bbox.width; 

newCy = (p2.y - bbox.y)/bbox.height; 

if (!animating ||(animatingOption != option)) { 
//start immediately at the mouse point 
track.setAttribute("cx", newCx); 
track.setAttribute("cy", newCy); 

} 


else { 
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//create an animated shift in the gradient center 
var oldCx = parseFloat(track.getAttribute("cx")); 
var oldCy = parseFloat(track.getAttribute("cy")); 
effects. push( 
{selector: selectTracker, attr:"cx", 
from: oldCx, to: newCx, 
EDS g, “E22 8.2 
F); 
effects.push( 
{selector: selectTracker, attr:"cy", 
from: oldCy, to: newCy, 
tis Oi t23 0.2 


}); 
} 
} 
else { 
//center gradient if triggered by keyboard event 
track.setAttribute("cx", 0.5); 
track.setAttribute("cy", 0.5); 
} 


//set overall animation parameters and initialize 
animating = true; 
animatingOption = option; 
requestAnimationFrame(function(t){ 

startTime = t; 

star.style.fill = paint.animate; © 
); 


//create a function to transform a time point 
//into a position in the animation effects 
var getProgress = function(t){ return (t-startTime)/dur; }; 


//determine which element will be animated for each effect 
//and the total amount of change 
effects. forEach(function(effect){ 
effect.node = document.querySelector(effect.selector); 
effect.by = effect.to - effect.from; 
}) 


function applyEffects(t){ © 
var a = getProgress(t), 
val; 
effects. forEach(function(effect){ 
if(a <= effect.t1) { 
val = effect.from; 


} 
else if (a >= effect.t2) { 





val = effect.to; 


else { 
val = effect.from + effect. by*( 
(a - effect.t1)/(effect.t2 - effect.t1) ); 


effect.node.setAttribute(effect.attr, val); 
H; 


if (a< 1) { 
// loop 


nextFrame = requestAnimationFrame(appLlyEffects) ; 
} 
else { 
//animation is complete 
star.style.fill = reverse? paint.off : paint.on; 
animating = false; 
} 
} 
//start updating 
nextFrame = requestAnimationFrame(appLyEffects); 


} 
NOs 


@ 脚本 开始 先 声明 一 组 函数 调用 期 间 共用 的 常量 和 变量 。 包 括 一 组 类 复 选 
框 的 元 素 ， 用 于 标识 将 要 更 改 的 图 形 的 选择 器 ， 一 个 随机 的 将 在 SVG 通 
用 方法 内 使 用 的 <svg> 元 素 ， 以 及 将 会 使 用 的 特定 填充 值 的 引用 ， 这 样 
我 们 就 可 以 方便 地 更 新 他 们 。 


O for 循环 初始 化 每 个 切换 元 素 (类 复 选 框 元 素 ) 为 未 选中 的 状态 ， 同 时 添 
加 事件 监听 器 。 


© checkKey 辅助 函数 用 于 响应 键盘 事件 ， 并 检测 切换 的 状态 是 否 应 该 改 
变 。 如 果 符 合 要 求 ， 则 调用 主要 的 事件 处 理 函 数 并 传 入 当前 上 下 文 以 及 
参数 。 

© toggleState 方法 可 以 直接 通过 点 击 事件 触发 或 间接 通过 键盘 事件 触发 。 
它 会 更 改 当 前 元 素 的 aria-checked 属性 ， 并 开始 过 流动 画 。 

© animateStar 函数 进行 开始 动画 前 需要 的 所 有 计算 。 参 数 表示 动画 应 该 持 
续 多 长 时 间 ， 动画 是 否 是 从 选中 状态 回 退 到 未 选中 状态 。 

O 整个 动画 定义 为 一 个 不 同 效果 的 数组 。 每 种 效果 的 对 象 描述 了 要 修 
改 哪个 元 素 (使 用 CSS 选择 器 的 值 )， 改 变 哪个 属性 (attr), mae 
值 (from) 和 最 终 值 (to) 分 别 是 什么 ， 以 及 动画 的 开始 (t1) 和 结束 
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(t2) 点 与 整个 动画 持续 时 间 的 比例 。 硬 编码 的 值 描述 的 是 动画 的 方向 ， 
如 果 动 画 应 该 反 向 运行 ， 就 会 交换 对 应 的 值 。 

@ if(animating) 代码 块 包含 了 防止 两 个 动画 冲突 的 代码 ， 它 们 修改 的 是 同 
一 个 泻 染 服务 元 素 。 

O 接 下 来 的 代码 块 首先 测试 动画 是 否 是 鼠标 点 击 屏幕 触发 的 ， 如 果 是 ， 就 
调整 渐变 围绕 触摸 点 向 外 辐射 或 向 内 收缩 。 

© 只 调用 一 次 的 requestAnimationFrame 函数 用 于 保存 动画 开始 的 时 间 惟 ， 
并 把 泻 染 服务 变 为 有 动画 的 图 案 。 

© 动画 的 剩余 部 分 使 用 requestAnimationFrame 重复 调用 appLyEffects A 
数 ， 以 此 来 更 新 所 有 过 渡 属 性 而 不 必 担 心 大 量 额外 的 计算 影响 它 的 速度 。 


标记 几乎 与 例 14-5 中 完全 相同 ， 只 是 删除 了 动画 元 素 。 唯 一 的 改变 是 
<pattern> 元 素 内 层级 的 顺序 一 这 个 改变 人 允许 每 个 动画 效果 使 用 从 一 个 值 
变 为 另 一 个 值 的 单 向 动画 来 描述 。 我 们 没有 让 有 动画 的 径 向 渐变 层 先 淡 入 
后 淡出 ， 而 是 把 它 绘制 为 最 下 面 的 一 层 ， 然 后 让 上 面 的 两 个 线性 渐变 层 痰 
入 或 淡出 。 


触发 用 户 事件 后 总 体操 作 如 下 。 


(1) 确定 该 操作 是 选中 还 是 取消 ， 并 更 新 ARIA 的 状态 (toggleState 图 数 ) 。 
这 里 也 是 添加 所 有 与 选中 和 取消 选中 相关 的 行为 的 地 方 。 


(2) 调 用 动画 启动 函数 (animatestar)， 运 行 1000ms 的 开启 动画 或 300ms 
的 关闭 动画 。 时 间 以 毫秒 为 单位 ， 这 是 因为 大 多 数 JavaScript 和 DOM 的 
时 间 方 法 使 用 的 是 毫秒 。 关 闭 动画 运行 得 更 快 ， 因 为 我 们 想 要 非常 明确 
地 响应 用 户 取 消 选 择 的 操作 。 

(3) 检查 是 否 有 动画 正在 执行 ， 如 果 有 ， 就 取消 挂 起 的 动画 请 求 。 如 果 正 在 
执行 动画 的 是 另 一 个 星星 ， 立 即 把 该 星星 置 为 最 终 状 态 。 另 外 ， 如 果 是 
同一 颗 星 星 ， 调 整 当前 动画 的 参数 使 它 可 以 从 当前 状态 平稳 地 继续 。 


(4) 如 果 是 鼠标 事件 (包括 触摸 屏 上 tap 创建 的 点 击 )， 把 径 向 渐变 的 中 心 设 
为 该 触发 事件 的 点 。 本 节 还 使 用 了 许多 SVG DOM 特有 的 方法 。 


* element.getBBox() 返回 对 象 在 其 局 部 坐标 系 中 的 边界 盒 , (ALE x, 
y, width 和 | height 属性 的 对 象 。 

。 element.getScreenCTM() 返回 元 素 坐 标 系 与 页 面 根 坐 标 系 之 间 的 累积 
变换 矩阵 〈《CTM)。 它 不 是 鼠标 事件 使 用 的 屏幕 坐标 系 ， 而 是 客户 端 
MIRA 
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e matrix.inverse() 8 EAIA EEE, SE Ae ES JE AEF Bll ES 
换 。 

。 svg.createSVGPoint() 生成 保 在 x 和 yy 数值 的 SVG 数据 对 象 。 
SVGPoint 对 象 在 访问 多 边 形 或 折线 时 使 用 。 自 己 创 建 的 唯一 原因 是 
用 于 下 一 个 方法 。 

e point.matrixTransform(matrix) 应 用 特定 矩阵 变换 来 计算 给 定 的 点 的 
位 置 。 


通过 这 些 方 法 ， 鼠标 事件 的 坐标 可 以 转换 到 星星 使 用 的 坐标 系 ， 然 后 使 
用 星星 的 边界 盒 来 把 它 转换 为 新 变 的 cx 和 cy 属性 的 对 象 边 界 盒 坐标 。 
如 果 更 改 的 是 正在 执行 的 动画 ， 中 心 点 的 移动 将 通过 给 effects 数组 添 
加 新 的 对 象 来 应 用 其 他 动画 效果 。 相 反 ， 如 果 切 换 是 由 键盘 事件 触发 ， 
cx 和 cy 将 被 重 置 为 元 素 的 中 心 。 


(5) 调 用 一 个 只 执行 一 次 的 动画 函数 来 初始 化 动画 ， 修 改 星星 的 填充 值 为 动 
图 和 案 ， 并 记录 动画 循环 的 开始 时 间 。 


(6) 定义 一 个 函数 (getProgress) 将 文档 的 时 间 戳 转化 为 动画 执行 时 间 与 动 

画 周期 的 比 。 如 果 你 想 通 过 缓 动 函 数 来 减 慢 或 加 快 动画 的 进度 ， 这 里 就 
是 进行 操作 的 地 方 。 

(7) 标识 每 个 动画 对 应 的 元 素 ， 并 把 它 存储 在 变量 中 以 便 快 速 访问 。 同 时 还 
把 from-to 语法 转化 为 from-by 的 格式 以 便 动 画 的 每 一 帧 中 的 数学 计算 
更 快 。 

(8) 最 后 ， 根 据 浏 览 器 啊 应 动画 帧 请 求 时 传递 给 回调 函数 (applyEffects) 
的 时 间 惟 ， 在 动画 的 每 个 阶段 应 用 变化 效果 。 效 果 是 通过 数据 对 象 数组 
来 定义 的 ， 每 个 对 象 的 结构 都 是 一 样 的 ， 所 以 可 以 通过 单个 国 数 来 计算 
当前 值 以 及 更 新 特定 元 素 上 相应 的 属性 。 


这 里 使 用 的 方法 仅仅 支持 简单 的 数值 插入 ， 且 只 支持 更 改 属 性 (包括 表 
现 属性 ) 。 如 果 想 要 给 颜色 、 复 杂 的 数据 列表 或 动画 样式 值 来 添加 动画 ， 
需要 添加 额外 的 代码 。 
(9) 在 动画 的 回调 中 ， 会 检查 动画 是 否 完 成 。 如 果 还 没有 完成 ， 就 请 求 另 一 
个 动画 帧 。 如 果 已 经 完成 ， 把 星星 切换 到 最 终 新 变 状 态 。 
唯一 的 限制 是 如 果 另 一 颗 星 星 上 有 交互 ， 当 前 星星 的 动画 会 被 中 止 。 这 是 
避免 冲突 所 必需 的 ， 因 为 这 里 只 有 一 个 泻 染 服务 来 绘制 所 有 星星 的 动画 状 
态 。 为 了 解决 这 个 问题 ， 你 需要 动态 为 每 个 要 添加 动画 的 元 素 单独 创建 演 
BARS (<radialGradient> 以 及 引用 它 的 <pattern>) 的 副本 。 这 些 DOM 
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BESEIRE, PTA PR SE DR EI FERI H. E He ae A KPH, 
当然 ， 两 个 交互 重 县 的 可 能 性 取决 于 每 个 动画 持续 多 长 时 间 。 对 于 用 户 交 
互动 画 ，1 秒 的 动画 实际 上 被 认为 是 相当 长 的 动画 。 

一 个 微小 的 交互 动画 就 需要 这 么 多 的 代码 。 因 此 ， 很 少 会 为 每 个 项 目 编写 
完整 的 自 定义 动画 脚本 。JavaScript 库 ， 例 如 Snap.svg (http://snapsvg.io/) , 
D3.js (https://d3js.org/), GreenSock Animation Platform 和 GSAP (https:// 
greensock.com/) 等 ， 提 供 了 有 效 控 制 动 画 时 间 和 中 间 插 值 的 方法 。 随 着 浏 
览 器 对 Web 动画 API 支持 程度 的 增加 ， 这 将 成 为 定义 特定 动画 效果 的 首选 
方法 。 
但 通过 切换 渲染 服务 来 创建 动画 和 给 泻 染 服务 组 件 添加 动画 的 整体 策略 在 
使 用 这 些 工具 时 依然 适用 。 也 就 是 说 ， 当 浏览 器 对 分 层 填 充 、 使 用 CSS Hr 
变 填 充 以 及 CSS 渐变 函数 的 过 渡 的 支持 程度 更 高 时 ， 这 种 特殊 效果 将 会 变 
得 更 加 容易 。 
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附录 人 


颜色 关键 词 和 语法 





SVG F0 CSS 中 的 颜色 可 以 指定 为 精确 的 数值 ， 也 可 以 使 用 预定 义 的 颜色 关 

键 词 。 

自 定义 纯色 可 以 通过 以 下 任意 一 种 格式 来 指定 。 

e #RRGGBB ， 六 个 十 六 进 制 的 数字 ， 每 一 对 代表 一 种 颜色 通道 在 0 (00) 到 
255 (FF) 之 间 的 一 个 值 。 

。 #RGB ， 三 个 十 六 进 制 的 数字 ， 相 当 于 每 个 数字 出 现 两 次 的 六 位 版 本 。 

。 rgb(r,g,b) ， 三 个 0 到 255 之 间 的 整数 或 三 个 百分数 值 。 

。 hsl(h,s,l) ， 第 一 个 参数 (hue) 是 一 个 表示 色 轮 (相对 于 红色 ) 上 角度 
的 数值 ， 饱 和 度 和 亮度 值 是 百分数 。 

自 定义 部 分 透明 颜色 可 以 通过 以 下 两 个 函数 之 一 来 指定 。 

e rgba(r,g,b,a) ， 前 三 个 值 是 百分数 或 整数 ，a 的 值 是 0 到 1 之 间 的 小 数 。 

。 hsla(h,s,1,a) ， 参 数值 是 一 个 数值 ， 两 个 百分数 ， 之 后 是 0 到 1 之 间 的 
alpha 值 。 


命名 纯色 在 表 A-1 中 列 出 ， 同 时 还 给 出 了 与 之 等 价 的 十 六 进 制 、RGB 和 
HSL 格式 。 百 分 比 的 RGB 值 和 HSL 值 已 经 四 侈 五 人 为 整数 。 此 外 ， 颜 色 
关键 词 transparent 表示 为 rgba(0,0,0,0) 或 hsla(0,0%,0%,0)。 
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表 A-1 SVG 和 CSS 中 的 命名 颜色 

关键 字 TH penn RGB 百分比 HSL 

制 值 
R GERB R G B H S E 

AliceBlue #fof8ff |240 | 248 | 255 |94% |97% | 100% |208 |6% |97% 
antiqueWhite #faebd7 |250 |235 |215 |98% |92% |84% | 34 14% |91% 
aqua #00ffff |0 255 |255 |0% 100% | 100% |180 |100% |50% 
aquamarine #7fffd4 |127 |255 |212 |50% 100% |83% |160 |50% |75% 
azure #fOffff |240 |255 |255 |94% |100% |100% |180 |6% |97% 
beige #f5f5dc |245 |245 |220 |96% |96% |86% |60 |10% |91% 
bisque #ffe4c4 |255 |228 |196 |100% |89% |77% |33 |23% |88% 
black #000000 |0 0 0 0% 0% 0% 0 0% |0% 
blanchedAlmond |#ffebcd |255 |235 |205 |100% |92% |80% |36 |20% |90% 
blue #0000ff |0 0 255 |0% 0% 100% |240 |100% |50% 
blueViolet #8a2be2 |138 |43 |226 |54% |17% |89% |271 |81% |53% 
brown #a52a2a |165 |42 |42 |65% |16% |16% |0 75% |41% 
burlywood #deb887 |222 |184 |135 |87% |72% |53% |34 |39% |70% 
cadetBlue #5f9ea0 |95 158 |160 |37% |62% |63% |182 |41% |50% 
chartreuse #7fff00 |127 |255 |0 50% |100% |0% 90 100% | 50% 
chocolate #d2691e |210 |105 |30 |82% |41% |12% |25 |86% |47% 
coral #ff7f50 |255 |127 |80 |100% |50% |31% |16 |69% |66% 
cornflowerBlue |#6495ed |100 |149 |237 |39% |58% |93% |219 |58% |66% 
cornsilk #fff8dc |255 |248 |220 |100% |97% |86% |48 |14% |93% 
crimson #dc143c |220 |20 |60 |86% |8% 24% |348 |91% |47% 
cyan #00ffff 255 |255 |0% 100% | 100% |180 |100% |50% 
darkBlue #00008b 0 39 |0% 0% 55% |240 |100% |27% 
darkCyan #008b8b 139 |139 |0% 55% |55% |180 |100% |27% 
darkGoldenrod |#b8860b |184 |134 |11 |72% |53% |4% 43 |94% |38% 
darkGray #a9a9a9 |169 |169 |169 |66% |66% |66% |0 0% 66% 
darkGreen #006400 |0 100 |0 0% 39% |0% 120 |100% |20% 
darkGrey #a9a9a9 |169 |169 |169 |66% |66% |66% |0 0% 66% 
darkKhaki #bdb76b |189 |183 |107 |74% |72% |42% |56 |43% |58% 
darkMagenta #8b008b |139 |0 39 |55% |0% 55% |300 |100% |27% 
darkOliveGreen |#556b2f |85 107 |47 |33% |42% |18% |82 |56% |30% 
darkOrange #ff8c00 |255 | 140 |0 100% |55% |0% 33 100% | 50% 
224 | 附录 A 





RGB 






































关键 字 十 六 进 十 进 制 什 RGB 百分比 HSL 
制 值 
R G |B R G B H S £ 
darkOrchid #9932cc |153 |50 |204 | 60% |20% |80% | 280 |75% |50% 
darkRed #8b0000 |139 |0 0 55% |0% 0% 0 100% | 27% 
darkSalmon #e9967a |233 |150 |122 |91% |59% |48% |15 |48% |70% 
darkSeaGreen #8fbc8f |143 |188 |143 |56% |74% |56% |120 |24% |65% 
darkSlateBlue |#483d8b |72 61 |139 |28% |24% |55% |248 |56% |39% 
darkSlateGray |#2f4f4f |47 79 |79 |18% |31% |31% |180 |41% |25% 
darkSlateGrey #2f4f4f | 47 79 |79 |18% |31% |31% |180 |41% |25% 
darkTurquoise #00ced1 |0 206 |209 |0% 81% |82% |181 |100% |41% 
darkViolet #9400d3 |148 |O 211 |58% |0% 83% |282 |100% |41% 
deepPink #ff1493 |255 |20 |147 |100% |8% 58% |328 |92% |54% 
deepSkyBlue #00bfff |0 191 |255 |0% 75% |100% |195 |100% |50% 
dimGray #696969 |105 |105 |105 |41% |41% |41% |0 0% |41% 
dimGrey #696969 |105 |105 |105 |41% |41% |41% |0 0% |41% 
dodgerBlue #1e90ff | 30 144 |255 | 12% |56% 00% |210 | 88% |56% 
firebrick #b22222 |178 |34 |34 | 70% | 13% 3% |0 81% |42% 
floralWhite #fffafO |255 | 250 |240 | 100% |98% |94% |40 |6% |97% 
forestGreen #228b22 |34 139 |34 |13% |55% 3% |120 |76% |34% 
fuchsia #ffooff |255 |O 255 |100% |0% 00% |300 |100% |50% 
gainsboro #dcdcdc |220 |220 |220 |86% |86% |86% |0 0% 86% 
ghostwhite #f8f8ff |248 |248 |255 |97% |97% 00% |240 |3% |99% 
gold #ffd700 |255 |215 |0 100% |84% |0% 51 100% | 50% 
goldenrod #daa520 |218 |165 |32 |85% |65% 3% 143 85% |49% 
gray #808080 |128 |128 |128 |50% |50% |50% |0 0% |50% 
green #008000 |0 128 |0 0% 50% |0% 120 |100% |25% 
greenYellow #adff2f |173 |255 |47 |68% 100% |18% |84 82% |59% 
grey #808080 |128 |128 |128 |50% |50% |50% |0 0% |50% 
honeydew #fOFFFO |240 |255 |240 |94% |100% |94% |120 |6% |97% 
hotPink #ff69b4 |255 |105 |180 |100% |41% |71% |330 |59% |71% 
indianRed #cd5c5c |205 |92 |92 |80% |36% |36% |0 55% |58% 
indigo #4b0082 |75 0 130 |29% |0% 51% |275 |100% |25% 
ivory #fffff0 |255 |255 |240 |100% | 100% |94% |60 |6% |97% 
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关键 字 十 六 进 十 进 制 值 RGB 百分比 HSL 

制 值 

R GERB R G B H S E 

khaki #f0e68c | 240 | 230 | 140 |94% |90% |55% |54 |42% |75% 
lavender #e6e6fa |230 | 230 |250 |90% |90% |98% |240 |8% |94% 
lavenderBlush |#fffof5 |255 |240 |245 |100% |94% |96% |340 |6% |97% 
lawnGreen #7cfc00 |124 |252 |0 49% |99% |0% 90 100% | 49% 
LemonChiffon #fffacd |255 |250 |205 | 100% |98% |80% |54 |20% |90% 
lightBlue #add8e6 |173 |216 |230 |68% |85% |90% |195 |25% |79% 
lightCoral #f08080 |240 |128 |128 |94% |50% |50% 10 47% |72% 
lightCyan #egffff |224 |255 |255 |88% |100% |100% |180 |12% |94% 
LightGoldenrod- 
Yellow #fafad2 |250 | 250 |210 |98% |98% |82% |60 | 16% |90% 
lightGray #d3d3d3 |211 |211 |211 |83% |83% |83% |0 0% |83% 
lightGreen #90ee90 |144 |238 |144 |56% |93% |56% |120 |39% |75% 
lightGrey #d3d3d3 |211 |211 |211 |83% |83% |83% |0 0% |83% 
lightPink #ffb6c1 |255 |182 |193 |100% |71% |76% |351 |29% |86% 
LightSalmon #ffa07a |255 | 160 | 122 | 100% |63% |48% |17 |52% | 74% 
lightSeaGreen | #20b2aa | 32 178 |170 |13% |70% |67% |177 |82% |41% 
lightSkyBlue #87cefa |135 |206 |250 |53% |81% |98% |203 |46% |75% 
lightSlateGray |#778899 |119 |136 |153 |47% |53% |60% |210 |22% |53% 
lightSlateGrey |#778899 |119 |136 |153 |47% |53% |60% |210 |22% |53% 
lightSteelBlue |#b0c4de |176 |196 |222 |69% |77% |87% |214 |21% |78% 
lightYellow #ffffe0 |255 |255 |224 |100% |100% |88% |60 |12% |94% 
lime #ooffoo |0 255 |0 0% 100% | 0% 120 | 100% | 50% 
LimeGreen #32cd32 | 50 205 |50 |20% |80% |20% | 120 |76% | 50% 
linen #fafOe6 | 250 | 240 | 230 |98% |94% |90% |30 |8% |94% 
magenta #ffooff |255 JO 255 |100% |0% 100% |300 |100% |50% 
maroon #800000 |128 |0 0 50% |0% 0% 0 100% | 25% 
ee #66cdaa |102 [205 |170 |40% | 80% |67% | 160 |50% | 60% 
mediumBlue #0000cd |0 0 205 | 0% 0% 80% | 240 | 100% | 40% 
mediumOrchid #ba55d3 | 186 |85 |211 |73% |33% | 83% |288 | 60% |58% 
mediumPurple #9370db |147 |112 |219 |58% |44% |86% |260 |49% | 65% 
mediumSeaGreen |#3cb371 |60 179 |113 |24% |70% |44% |147 |66% |47% 
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关键 字 十 六 进 eee RGB 百分比 HSL 
制 值 
G |B R G B H S L 

mediumS Late - 

Siue #7b68ee |123 |104 |238 |48% |41% |93% |249 |56% |67% 
se #60faga |0 |250 |154 |o% |98% |60% |157 |100% |49% 
mediumTurquoise | #48d1cc |72 209 |204 |28% |82% |80% |178 |66% |55% 
mediumVioletRed | #c71585 |199 |21 |133 |78% |8% 52% |322 |89% |43% 
midnightBlue #191970 |25 25 |112 |10% |10% |44% |240 |78% |27% 
mintCream #f5fffa |245 |255 |250 |96% |100% |98% |150 |4% |98% 
mistyRose #ffe4e1 |255 |228 |225 |100% |89% |88% |6 12% |94% 
moccasin #ffe4b5 |255 |228 |181 |100% |89% |71% |38 |29% |85% 
navajowhite #ffdead |255 |222 |173 |100% |87% |68% |36 32% |84% 
navy #000080 |0 0 128 | 0% 0% 50% | 240 | 100% | 25% 
oldLace #fdf5e6 |253 | 245 |230 |99% |96% |90% |39 |9% 195% 
olive #808000 |128 |128 |0 50% |50% |0% 60 |100% |25% 
oliveDrab #6b8e23 |107 |142 |35 |42% |56% |14% |80 |75% |35% 
orange #ffa500 |255 |165 |0 100% |65% |0% 39 |100% | 50% 
orangeRed #ff4500 |255 |69 |0 100% |27% |0% 16 100% | 50% 
orchid #da70d6 |218 |112 |214 |85% |44% |84% |302 |49% |65% 
paleGoldenrod #eee8aa |238 |232 |170 |93% |91% |67% |55 29% |80% 
paleGreen #98fb98 |152 |251 |152 |60% |98% |60% |120 |39% |79% 
paleTurquoise #afeeee |175 |238 |238 |69% |93% |93% |180 |26% |81% 
paleVioletRed |#db7093 |219 |112 |147 |86% |44% |58% |340 |49% |65% 
papayaWhip #ffefdS |255 |239 |213 |100% |94% |84% |37 16% |92% 
peachPuff #ffdab9 |255 |218 |185 |100% |85% |73% |28 |27% |86% 
peru #cd853f |205 |133 |63 |80% |52% |25% |30 |69% |53% 
pink #ffcOcb |255 |192 |203 |100% |75% |80% |350 |25% |88% 
plum #ddaOdd |221 |160 |221 |87% |63% |87% |300 |28% |75% 
powderBlue #b0e0e6 |176 | 224 | 230 |69% |88% |90% | 187 | 23% | 80% 
purple #800080 |128 |0 128 |50% |0% 50% |300 |100% |25% 
rebeccaPurple #663399 |102 |51 153 |40% |20% |60% |270 |67% |40% 
red #ff0000 |255 |0 0 100% |0% 0% 0 100% | 50% 
rosyBrown #bc8f8f |188 |143 |143 |74% |56% |56% |0 24% |65% 
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关键 字 Ta 十 进 制 什 RGB 百分比 HSL 

R G R G B H S E 
royalBlue #4169e1 | 65 105 25% |41% |88% |225 |71% |57% 
saddleBrown #8b4513 |139 |69 55% |27% |7% 25 |86% |31% 
salmon #fa8072 |250 |128 98% |50% |45% |6 54% |71% 
sandyBrown #f4a460 |244 |164 96% |64% |38% |28 61% |67% 
seaGreen #2e8b57 |46 139 18% |55% |34% |146 |67% |36% 
seashell #fff5ee |255 |245 100% |96% |93% |25 |7% |97% 
sienna #a0522d |160 |82 63% |32% |18% |19 |72% |40% 
silver #cOcOcO |192 |192 75% |75% |75% |0 0% |75% 
skyBlue #87ceeb |135 |206 53% |81% |92% |197 |43% |73% 
slateBlue #6a5acd |106 |90 42% |35% |80% |248 |56% |58% 
slateGray #708090 | 112 128 44% |50% |56% |210 |22% | 50% 
slateGrey #708090 |112 | 128 44% |50% |56% |210 |22% | 50% 
snow #fffafa |255 |250 100% |98% |98% |0 2% |99% 
springGreen #00ff7f |0 255 0% 100% |50% |150 |100% |50% 
steelBlue #4682b4 |70 130 27% |51% |71% |207 |61% |49% 
tan #d2b48c |210 |180 82% |71% |55% |34 |33% |69% 
teal #008080 |0 128 0% 50% |50% |180 |100% |25% 
thistle #d8bfd8 |216 |191 85% |75% |85% |300 |12% |80% 
tomato #ff6347 |255 |99 100% |39% |28% |9 72% |64% 
turquoise #40e0d0 |64 224 25% |88% |82% |174 |71% |56% 
violet #ee82ee |238 |130 93% |51% |93% |300 |45% |72% 
wheat #f5deb3 |245 |222 96% |87% |70% |39 |27% |83% 
white #ffffff |255 |255 100% |100% |100% |0 0% |100% 
whiteSmoke #f5f5f5 |245 |245 96% |96% |96% |0 0% |96% 
yellow #ffff00 |255 |255 100% |100% |0% 60 |100% | 50% 
yellowGreen #9acd32 |154 |205 60% |80% |20% |80 76% |50% 
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该 指南 给 SVG 泻 染 服务 元 素 可 用 的 属性 及 其 默认 值 和 可 设置 的 值 提供 快速 
BF. 











<LinearGradient> 
颜色 结 点 绘制 为 与 渐变 矢量 垂直 (在 渐变 的 坐标 系 内 ) 的 平行 线 的 渐变 。 
id 

它 的 值 用 于 引用 该 渐变 。 

。 与 所 有 其 他 元 素 id 的 限制 相同 。 











x1 
渐变 矢量 起 点 的 水 平 位 置 。 
。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 (相对 于 坐标 系 宽 
度 )。 
。 默认 值 为 0。 
y1 


渐变 矢量 起 点 的 垂直 位 置 。 


。 一 个 长 度 值 〈 在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 〈 相 对 于 坐标 系 高 
度 )。 
。 默认 值 为 0。 
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x2 
渐变 矢量 终点 的 水 平 位 置 。 
。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 (相对 于 坐标 系 宽 
度 )。 
。 默认 值 为 100%。 
y2 
渐变 矢量 终点 的 垂直 位 置 。 
。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 (相对 于 坐标 系 高 
度 )。 
。 默认 值 为 0。 
gradientUnits 


使 用 的 坐标 系 。 


。 值 为 userspaceOnUse 或 objectBoundingBox。 
。 默认 值 为 objectBoundingBox。 





























gradientTransform 
应 用 在 渐变 内 容 的 变换 ， 独 立 于 它 要 填充 的 形状 。 
。 空白 分 隔 的 变换 国 数 列表 : translate(tx,ty), scale(s), scale(sx, 
sy)、rotate(a)、rotate(a,cx,cy)、skewX(a) 和 skewY(a). 
。 每 个 变换 的 参数 都 是 不 带 单位 的 数字 (在 SVG 1 的 语法 中 ) ， 长 度 被 
解析 为 用 户 单位 (px)， 角 度 被 解析 为 度数 。 
。 默认 值 为 没有 变换 。 
spreadMethod 
用 在 超出 渐变 矢量 起 点 和 终点 的 填充 内 容 的 策略 。 


。 {HX pad, reflect 或 repeat. 
。 默认 值 为 pad。 
xlink:href 

引用 另 一 个 渐变 来 作为 当前 渐变 的 模板 。 

。 指向 目标 片段 的 URL， 它 的 值 必须 匹配 相同 文档 内 <LinearGradient> 
或 <radialGradient> 元 素 的 ID, 
引用 的 元 素 的 所 有 属性 作为 当前 元 素 的 默认 值 。 
如 果 当 前 元 素 不 包含 任何 <stop> 元 素 ， 使 用 引用 的 元 素 的 结 点 。 























230 | 附录 B 


。 在 XML 文档 中 (H SVG), xlink 前 级 必须 附属 于 XLink 命名 空间 ， 
http://www.w3.org/ 1999/xlink， 使 用 xmLns:xLink 属性 。 








<radialGradient> 
颜色 结 点 沿 着 起 点 向 外 部 圆 发 散 的 渐变 。 
id 

它 的 值 用 于 引用 该 渐变 。 

。 与 所 有 其 他 元 素 id 的 限制 相同 。 














cx 
中 心 点 的 水 平 位 置 。 
。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 (相对 于 坐标 系 宽 
。 i 50%. 

cy 
中 心 点 的 垂直 位 置 。 
。 一 个 长 度 值 〈 在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 (相对 于 坐标 系 高 

BE). 


。 BRIMEA 50%. 


圆 的 半径 。 

。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 (与 坐标 系 对 角 线 
长 度 成 比例 ， 使 对 角 线 始终 为 V2 x 100%). 

。 默认 值 为 50% 。 





负 值 会 报错 。 
fx 
焦点 的 水 平 位 置 。 
。 一 个 长 度 值 〈 在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 〈 相 对 于 坐标 系 宽 
度 )。 


。 默认 值 与 cx 的 值 相同 。 
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fy 
焦点 的 垂直 位 置 。 
。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 (相对 于 坐标 系 高 
度 )。 
。 默认 值 与 cy 的 值 相同 。 
gradientUnits 


使 用 的 坐标 系 。 


。 值 为 userspaceOnUse 或 objectBoundingBox。 
。 默认 值 为 objectBoundingBox。 








gradientTransform 

应 用 在 渐变 内 容 的 变换 ， 独 立 于 它 要 填充 的 形状 。 

。 语法 和 可 选 值 与 <LinearGradient> 相同 。 
spreadMethod 

用 在 超出 最 外 层 圆 的 填充 内 容 的 策略 。 

。 语法 和 可 选 值 与 <LinearGradient> 相同 。 
xlink:href 

引用 另 一 个 渐变 来 作为 当前 渐变 的 模板 。 

。 语法 和 可 选 值 与 <LinearGradient> 相同 。 








<stop> 


渐变 内 的 一 个 固定 值 。 
offset 
沿 着 渐变 矢量 或 射线 定位 该 值 对 应 的 距离 。 
。 0 到 1 之 间 的 数字 或 百分数 。 
。 它 的 值 被 限制 在 [0~1] 或 [0%~100%] 的 范围 内 。 
。 结 点 必须 按照 偏 移 增 长 的 顺序 排列 ， 如 果 不 这 样 ， 偏 移 值 会 被 调整 为 
之 前 的 最 大 值 。 
。 SVG 1.1 中 官方 没有 说 明 默 认 值 ;SVG 2 和 大 多 数 浏览 器 中 默认 值 为 0。 
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stop-color (表现 属性 ) 
用 在 该 结 点 的 颜色 。 


。 任何 浏览 器 支持 的 合法 的 颜色 定义 。 
。 默认 为 black。 


stop-opacity 〈 表 现 属 性 ) 
用 在 该 结 点 的 aLpha 值 。 


。 0 到 1 之 间 的 数字 。 
。 默认 值 为 1。 


<pattern> 
一 个 泻 染 服务 ， 它 定义 一 个 用 于 填充 其 他 元 素 的 自 定义 SVG 内 容 的 区 域 ， 
根据 需要 在 矩形 网 格 中 进行 重复 。 
id 
它 的 值 用 于 引用 该 渐变 。 
。 与 所 有 其 他 元 素 id 的 限制 相同 。 








HAF E RER EE PA AAC hs 


。 一 个 长 度 值 〈 在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 〈 相 对 于 坐标 系 宽 
度 )。 
。 默认 值 为 0。 


y 
相对 于 图 案 瓷 砖 左上 角 的 垂直 偏 移 。 
。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 〈 相 对 于 坐标 系 高 
度 )。 
。 默认 值 为 0。 
width 
每 个 图 案 瓷 砖 的 宽度 。 
。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 〈 相 对 于 坐标 系 宽 
RE). 
。 默认 值 为 0， 此 时 禁止 浑 染 图 案 。 
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负 值 会 报错 。 

















height 
每 个 图 案 瓷砖 的 高 度 。 
一 个 长 度 值 〈 在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 〈 相 对 于 坐标 系 高 
RE). 
默认 值 为 0， 此 时 禁止 泻 染 图 案 。 
负 值 会 报错 。 
patternUnits 


x, y, width 和 height 使 用 的 坐标 系 。 


值 为 userspaceOnUse 或 objectBoundingBox. 
默认 值 为 objectBoundingBox。 





patternContentUnits 

绘制 图 案子 内 容 所 使 用 的 坐标 系 。 

。 值 为 userSpace0nUse 或 objectBoundingBox. 
默认 值 为 userSpaceO0nUse。 
如 果 指 定 了 viewBox 则 没有 效果 。 
值 为 objectBoundingBox 时 实现 为 对 用 户 单位 非 均 匀 缩 放 ， 它 不 会 为 

百分比 长 度 创建 一 个 新 的 参照 。 
viewBox 
声明 一 个 用 于 图 案 内 容 的 自 定 义 坐 标 系 。 
四 个 数字 的 列表 ， 以 空格 或 逗号 分 隔 。 
数字 代表 的 值 ， 依 次 为 : 最 小 的 x， 最 小 的 y， 宽 ， 高 。 
宽度 值 和 高 度 值 必 须 为 正 。 

。 默认 情况 下 ， 坐 标 系 通过 patterncontentunits 来 控制 。 

。 viewBox 实现 为 一 个 缩放 变换 , 且 不 会 为 百分比 长 度 创建 一 个 新 的 参照 。 

preserveAspectRatio 

当 viewBox 定义 的 宽 高 比 与 图 案 姿 砖 的 宽 高 比 不 匹配 时 使 用 的 缩放 和 对 

齐 策略 。 

{HA none 或 者 一 个 对 齐 值 后 紧 跟 meet 或 slice. 

对 章 值 是 一 个 单独 的 单词 xMxxYMxx， 其 中 Mxx 为 Min, Mid, Max 之 一 。 
默认 值 为 xMidYMid meet. 

只 有 在 指定 了 viewBox 属性 时 才 有 效果 。 
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patternTransform 
应 用 在 图 案 盗 砖 和 图 案 内 容 的 变换 ， 独 立 于 它 要 填充 的 形状 。 
。 语法 和 可 选 值 与 <LinearGradient> 的 gradientTransform 属性 相同 。 
。 默认 值 为 没有 变换 。 
xlink:href 
引用 另 一 个 图 案 来 作为 当前 图 案 的 模板 。 
。 指向 目标 片段 的 URL， 它 的 值 必 须 匹 配 相 同文 档 内 <pattern> 元 素 
的 ID。 
。 引用 的 元 素 的 所 有 属性 作为 当前 元 素 的 默认 值 。 
。 如 果 当 前 元 素 不 包含 任何 子 元 素 ， 则 使 用 引用 的 元 素 的 图 案 内 容 。 
。 在 XML 文档 中 (包括 SVG), xlink 前 缀 必须 附属 于 XLink 命名 空间 ， 
http:/www.w3.org/ 1999/xlink， 使 用 xmLns:xtLink 属性 。 
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作者 介绍 

Amelia Bellamy-Royds 是 一 位 科技 领域 内 的 自由 撰 稿 人 。 她 在 Web 设计 圈 内 
因 关 于 SVG 的 著作 而 出 名 。Amelia 是 W3C SVG 工作 组 的 特 邀 专家 ， 并 且 
积极 参与 SVG 辅助 工作 组 的 工作 。 她 通过 参与 在 线 社区 (例如 Web Platform 
Docs, Stack Exchange 和 Codepen) 来 帮助 促进 Web 标准 和 设计 的 发 展 。 
Amelia 对 SVG 的 兴趣 来 自 于 数据 可 视 化 的 工作 ， 并 建立 在 她 获得 生物 信息 
学 理学 学 士 时 学 到 的 编程 基础 之 上 。 从 那 以 后 ， 她 开始 从 事 科 学 、 健 康 和 
环境 政策 的 研究 ， 且 获得 了 新 闻 学 硕士 学 位 。Amelia 目前 居住 在 加 拿 大 的 
艾 伯 塔 省 埃 德 蒙 顿 市 。 如 果 她 不 在 电脑 旁 ， 很 可 能 在 打 理 她 的 菜园 或 外 出 
享受 现场 音乐 。 

Kurt Cagle 曾经 是 SVG 工作 组 的 成 员 ， 且 在 2004 年 出 版 了 第 一 个 本 关于 
SVG 的 书 。 目 前 是 作为 W3C Xforms 工作 组 的 特 邀 专家 ， 他 在 为 美国 国家 
档案 馆 工 作 之 后 ， 成 为 国会 图 书馆 的 XML 数据 架构 师 。 他 从 2003 年 以 来 
一 直 是 O'Reilly Media 的 定期 投稿 者 ， 并 且 还 在 2008 年 至 2009 年 期 间 担任 
在 线 编 辑 。 


封面 介绍 

本 书 封面 上 的 动物 是 藏族 血 维 (Ithaginis cruentus tibetanus)。 这 种 小 的 ， 像 
恼 克 一 样 的 锥 鸡 在 整个 不 丹东 部 和 西藏 南部 山区 的 森林 地 区 数量 稳定 。 整 
个 夏天 可 以 在 高 海拔 地 区 发 现 它们 ， 秋 天 和 冬天 随 着 降雪 量 的 增加 它们 会 
退回 到 山谷 。 

血 维 上 身 羽 毛 是 蓝 灰 色 的 ， 下 身 有 一 些 人 苹果 绿 的 羽毛 。 该 物种 的 通用 名 称 
指 的 是 它们 胸部 的 羽毛 ， 叶 典型 的 明亮 的 深 红色 ,就 像 血 还 一 般 。 这 些 动 
物 还 可 以 通过 红色 的 脚 和 红色 的 眼睛 来 区 分 。 

雄性 通常 1.5 英尺 长 ， 肉 性 略 小 ， 但 颜色 更 加 和 柔和、 均匀。 它们 的 强壮 的 不 
子 用 于 抓 取 食物 ， 主 要 是 绿色 植物 ， 如 苔 其 、 蕨 类 植物 和 松树 枝 。 

血 维 并 不 特别 擅长 于 飞行 ， 它 们 会 在 4 月 下 身 和 5 月 初 开始 在 地 面 上 筑 
TEES POR IRL (通常 六 或 七 个 )。 如 果 它 们 感觉 到 了 危险 ,就 会 将 巢 
穴 移 到 一 个 新 的 位 置 或 遗 齐 。 小 鸡 会 在 6 月 中 自 团 出， 并 且 和 它 的 妈妈 在 
一 起 直到 冬天 。 

O'Reilly 封面 上 的 许多 动物 都 濒临 灭绝 ， 它 们 对 于 世界 来 说 非常 重要 。 要 想 
了 解 更 多 关于 如 何 提 供 帮 助 的 信息 ， 请 访问 animals.oreilly.com, 

封面 上 的 动物 是 Karen Montgomery 基于 Wood’s Natural History 中 的 一 个 雕 
刻 品 所 做 。 
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作者 : Kyle Simpson 
译 者 : 单 业 等 





响应 式 Web 设计 : HTML5 #1 CSS3 实战 (第 2 版 ) 





© 围绕 实战 案例 
© 全 面 讲解 与 响应 式 设计 相关 的 现代 Web 技 术 


作者 : Ben Frain 
译 者 : DAA 














Angular 权威 教程 


令 Angular 领 域 里 程 碑 式 著作 

令 全 面 详 尽 、 通 俗 易 懂 ， 带 你 轻松 领悟 新 一 代 Web 开 发 精髓 

@ Google Angular 项 目 经 理 兼 主管 Naomi Black, Google 
开发 技术 推广 部 大 中 华 区 主管 栾 跃 作 序 推荐 


作者 : Ari Lerner 等 
译 者 : Nice Angular 社区 
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CSS 揭 秘 


全 新 解答 网 页 设计 经 典 难题 








CSS 揭秘 











@ CSS 一 姐 Lea Verou 作 品 
涵盖 7 大 主题 ，47 个 Css 技巧 4 近年 来 最 重要 的 CSS 技 术 书 





© 全 新 解答 网 页 设计 经 典 难题 
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ie 作者 : Lea Verou 
译 者 : CSS 魔法 














Meteor 实战 


© Meteor 之 父 作 序 推荐 ， 全 栈 开发 必 读 
人 直击 Web/ 移 动 应 用 开发 痛 点 
令 通过 实例 详细 讲解 Meteor 应 用 开发 全 流程 


作者 : Stephan Hochhaus , Manuel Schoebel 
译 者 : 杨 学 辉 








学 习 JavaScript 数据 结构 与 算法 (第 2 版) 


用 JavaScript 学 习 常 用 的 数据 结构 和 算法 ， 高 效 解决 计算 机 
科学 中 的 常见 问题 

学 习 JavaScript 

数据 结构 与 算法 (zs) 


作者 : Loiane Groner 
译 者 : 邓 钢 等 








在 线 出 版 , 电子 书 ,《 码 农 》 杂 志 
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深入 理解 SVG 


作为 W3C 的 开放 标准 ，SVG 被 越 来 越 多 的 开发 者 所 关 
注 。SVG 不 只 是 简单 的 矢量 图 ， 还 可 以 加 上 更 复杂 的 
绘画 和 更 细致 的 效果 ， 包 括 泻 染 、 渐 变 、 应 用 到 文 
本 ， 甚 至 可 以 添加 照片 。 


本 书 深入 介绍 SVG 绘画 。 主 要 内 容 如 下 。 


E SVG 泻 染 模型 如 何 实现 描 边 和 填充 


E 标准 颜色 的 应 用 ， 自 定义 颜色 ， 创 建 颜色 
模板 
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